ES6-21.class基本语法

1.简介(详情参考)

class是构造函数的语法糖。

class的constructor方法内的实现，就是原来构造函数的实现。

class内的所有方法都是在prototype上的，就是原来构造函数的prototype上的实例共享方法。

class A {
    constructor() {}
    addNum() {}
}
Object.keys(A.prototype); // []
// 等同于
function B() {};
B.prototype = {
    constructor() {},
    addNum() {}
}
Object.keys(B.prototype); // ["constructor", "addNum"]

⚠️对于访问内部函数有差别：class内部定义的函数不可遍历，构造函数的可以遍历。👆的Object.keys()方法。

2.constructor方法

class必须有constructor方法。如果不写，js引擎会自动添加constructor方法。

class A{}
// 等于
class A{
    constructor() {} // 空的方法
};

constructor方法默认返回this; 也可以自定义return对象，如果return原始数据，则忽略。

和构造函数区别： 必须有new,否则报错;

对于子类，必须在constructor方法中调用super()方法，否则无法访问this。如果不写constructor方法，则系统会默认

    constructor(...args) {
        super(...args);
    }

3. prototype和__proto__

class作为构造函数的语法糖，既有对象的__proto__属性，也有函数的prototype属性。

示例：

class A {
}
class B extends A {
}

B继承A，其实分两部分继承，一部分是实例属性和方法的继承，一部分是静态属性和方法的继承；

// 静态属性的继承
Object.setPrototypeOf(B, A);
// 实例属性的继承
Object.setPrototypeOf(B.prototype, A.prototype);
// 其中setPrototypeOf 的方法实现如下：
// function setPrototypeOf(x,y) {
//     x.__proto__ = y;
// }

通过上面的定义可以知道：

B.__proto__ === A;
B.prototype.__proto__ === A.prototype;
B.__proto__.__proto__ === A.__proto__;

PS :ES5中通过setPrototypeOf,Object.create()来实现继承；

ES6通过extends