JavaScript学习笔记（二十八）——class类

class 类

1、理解：

es6中为了更好的把js设计出面向对象的语言的语法特征，把es5中new 函数名（） 又是类又是构造函数分离出来，创造了class。

js是什么语言？

js是一个基于面向对象设计的单线程的静态的脚本语言。

1. 面向对象：（类 实例对象 继承 封装 多态 等特点）

2. 基于面向对象设计：本质没有继承 类 等语法，但是按照他自己的语法特征（比如：原型）

3. 单线程：代码只能一个业务一个业务的执行。

4. 静态：例如： var a={ }; var re=a*20；这一行报错，但是前一行不会提前知道，还是执行了。

5. 脚本语言：嵌入式语言，特点：灵活

概述

• 在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

• class 的本质是 function。

• 它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

• 类不可重复声明。

• 类名约定首字母大写。

• 类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错。

2、类定义

1. 申明类

 var fn=class{ }
 console.log(fn)

1. 匿名类

var fn=class{}
var f1=new fn()
console.log(f1)

js没有类，是原型思想，但是不能用函数的语法来写。

3、类主体

属性：es6中的类中不能直接定义变量，必须定义在constructor中。

class People{
    constructor(){
        this.a=100;
    }
}
let p = new People();
console.log(p.a);

方法：

2、默认方法：constructor,创建类的对象时被调用。一个类中有且仅有一个构造方法。

class People {
    constructor() {
        console.log("构造方法");
    }
} 
new People(); //将执行constructor方法

2、原型方法：不使用function关键字，通过“对象.原型方法”调用。

class People {
    say(world) {
        console.log(`say ${world}`);
    }
    add(a, b) {
        console.log(a + b);
    }
}
let p = new People();
p.say("hello"); //say hello
p.add(1, 2); //3

3、静态方法：使用static修饰，调用时不需要创建对象，直接通过“类名.静态方法”调用

class People {
    static sum(a, b) {
        console.log(a + b);
    }
}
People.sum(1, 2);

4、类的继承

先来看个例子：

class parent {
    constructor() {
        this.a = 100;
        console.log("hello");
    }
    run(m) {
        console.log(`跑了${m}分钟`);
    }
    static eat(food) {
        console.log(`吃了${food}`);
    }
}
​
​
​
class Son extends parent {
    constructor() {
        super();//调用父类构造器，必须存在，且位于子类构造器第一行的位置
        this.b = 200;
    }
    set() {
        console.log('set.......');
    }
}
​
let son1 = new Son();
console.log(son1.a, son1.b);
son1.run('5');
parent.eat('饺子');
​

在上述例子中：子类Son及有自己的方法，也继承到了父类parent的方法属性。

总结：

• 类的继承解决了代码的复用问题；

• 使用extends关键字实现继承；

• 子类可以继承父类中所有（包括静态）的方法和属性；

• 子类只能继承一个父类（单继承），一个父类可以有多个子类；

• 子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行；

• 子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）；

5、内部类

属于外部类的成员，必须通过 “外部类.内部类”访问。

// 外部类
class Outer {
    constructor() {
         console.log("外部类");
    }
}
// 内部类
Outer.Inner = class {
    constructor() {
         console.log("内部类");
    }
}     
new Outer();   //外部类
new Outer.Inner();  //内部类