ES6前的类和继承可以参考下这篇文章JavaScript常用八种继承方案,修改原型链的操作真是令人脑阔痛.
类
传统的ES5 类定义:
1 | function Point(x, y) { |
ES6 中加入了class
关键字,使得类的原型写法更加清晰,更像面对对象编程的语法。
1 | class Point { |
其中的constructor
就是类的构造方法,this
代表了实例对象,也就是说ES5 的构造函数Point
对应了ES6 中的Point
类的构造方法。
1 | class Point { |
继承
举个例子:1
2
3
4
5
6
7
8
9
10class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
super
在这里表示父类的构造函数,用来新建父类的this
对象。
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类自己的this
对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super
方法,子类就得不到this
对象。
1 | class Point { /* ... */ } |
ES5 的继承,实质是先创造子类的实例对象this
,然后再将父类的方法添加到this
上面(Parent.apply(this)
)。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this
上面(所以必须先调用super
方法),然后再用子类的构造函数修改this
。
如果子类没有定义constructor
方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor
方法。
1 | class ColorPoint extends Point { |
另一个需要注意的地方是,在子类的构造函数中,只有调用super之后,才可以使用this关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super方法才能调用父类实例。
1 | class Point { |
上面代码中,子类的constructor方法没有调用super之前,就使用this关键字,结果报错,而放在super方法之后就是正确的。
下面是生成子类实例的代码。
1 | let cp = new ColorPoint(25, 8, 'green'); |
上面代码中,实例对象cp同时是ColorPoint和Point两个类的实例,这与 ES5 的行为完全一致。
最后,父类的静态方法,也会被子类继承。1
2
3
4
5
6
7
8
9
10class A {
static hello() {
console.log('hello world');
}
}
class B extends A {
}
B.hello() // hello world