（JavaScript）中的类继承（extends、重写方法、重写constructor、重写类字段、[[HomeObject]]）
"extends"关键字
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed = speed;
alert(`${
this.name} runs with speed ${
this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${
this.name} stands still.`);
}
}
let animal = new Animal("My animal");
class Rabbit extends Animal {
hide() {
alert(`${
this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
extends将Rabbit.prototype.[[Prototype]]设置为Animal.prototype
在extends后允许任意表达式
function f(phrase) {
return class {
sayHi() {
alert(phrase); }
};
}
class User extends f("Hello") {
}
new User().sayHi(); // Hello
重写方法
class Rabbit extends Animal {
stop() {
// ……现在这个将会被用作 rabbit.stop()
// 而不是来自于 class Animal 的 stop()
}
}
- 在父类的基础上进行调整或扩展其功能，可以使用
super关键字 - 执行
super.method(...)来调用一个父类方法。 - 执行
super(...)来调用一个父类constructor（只能在我们的constructor中）。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed = speed;
alert(`${
this.name} runs with speed ${
this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${
this.name} stands still.`);
}
}
class Rabbit extends Animal {
hide() {
alert(`${
this.name} hides!`);
}
stop() {
super.stop(); // 调用父类的 stop
this.hide(); // 然后 hide
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit 以速度 5 奔跑
rabbit.stop(); // White Rabbit 停止了。White rabbit hide 了！
箭头函数没有super
//箭头函数没有super，如果被访问，它会从外部函数获取
class Rabbit extends Animal {
stop() {
//箭头函数的super和stop的是一样的
setTimeout(() => super.stop(), 1000); // 1 秒后调用父类（Animal）的 stop
}
}
class Rabbit extends Animal {
stop() {
//如果这里是普通的函数，将会抛出错误
setTimeout(function() {
super.stop() }, 1000);
}
}
重写constructor
如果一个类扩展了另一个类并且没有 constructor，那么将生成下面这样的“空” constructor
class Rabbit extends Animal {
// 为没有自己的 constructor 的扩展类生成的
constructor(...args) {
//调用了父类的 constructor，并传递了所有的参数
super(...args);
}
}
-
继承类的
constructor必须调用super(...)，并且一定要在使用this 之前调用。 -
在 JavaScript 中，继承类（所谓的“派生构造器”，英文为 “derived constructor”）的构造函数与其他函数之间是有区别的。派生构造器具有特殊的内部属性
[[ConstructorKind]]:"derived"。 -
这是一个特殊的内部标签。该标签会影响它的
new行为：
- 当通过
new执行一个常规函数时，它将创建一个空对象，并将这个空对象赋值给this。 - 但是当继承的
constructor执行时，它不会执行此操作。它期望父类的 constructor来完成这项工作。 - 因此，
派生的 constructor必须调用super才能执行其父类（base）的constructor，否则this指向的那个对象将不会被创建。并且我们会收到一个报错。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
super(name);
this.earLength = earLength;
}
// ...
}
// 现在可以了
let rabbit = new Rabbit("White Rabbit", 10);
alert(rabbit.name); // White Rabbit
alert(rabbit.earLength); // 10
重写类字段
- 不仅可以重写方法，还可以重写类字段
class Animal {
name = 'animal';
constructor() {
alert(this.name); // (*)
}
}
class Rabbit extends Animal {
name = 'rabbit';
}
/*
* 为什么这两个会输出相同的结果呢？
* 因为Rabbit没有自己的构造器，去调用了Animal的构造器
* 而父类构造器（Animal）总是会使用它自己字段的值，而不是重写的那一个
**/
new Animal(); // animal
new Rabbit(); // animal
如果这还不清楚，那么让我们用方法来进行比较。
class Animal {
showName() {
// 而不是 this.name = 'animal'
alert('animal');
}
constructor() {
this.showName(); // 而不是 alert(this.name);
}
}
class Rabbit extends Animal {
showName() {
alert('rabbit');
}
}
new Animal(); // animal
new Rabbit(); // rabbit
类字段初始化的顺序
- 对于
基类（还未继承任何东西的那种），在构造函数调用前初始化。 - 对于
派生类，在super()后立刻初始化。
在上面的Animal和Rabbit的例子当中，Animal是基类，所以在构造函数调用之前就已经初始化了。Rabbit是派生类，new Rabbit() 先去调用了 super()，执行了父类构造器。父类构造器中有this.name，但是此时Rabbit还没有自己的类字段，就使用了Animal的类字段。Rabbit在super()调用之后，才会初始化自己的类字段。
深入：内部探究[[HomeObject]]
super的运行机制
当一个对象方法执行时，它会将当前对象作为this
如果调用super.method()，引擎需要从当前对象的原型中获取method（this.__proto__.method）
但是，这个方法是行不通的。
let animal = {
name: "Animal",
eat() {
alert(`${
this.name} eats.`);
}
};
let rabbit = {
__proto__: animal,
name: "Rabbit",
eat() {
// 这就是 super.eat() 可以大概工作的方式
/*
*.call(this) 在这里非常重要
*因为简单的调用 this.__proto__.eat() 将在原型的上下文中执行 eat，而非当前对象。
**/
this.__proto__.eat.call(this);
}
};
rabbit.eat(); // Rabbit eats.
但是，如果我们在原型链上再添加一个对象，将会发生变化
let animal = {
name: "Animal",
eat() {
alert(`${
this.name} eats.`);
}
};
let rabbit = {
__proto__: animal,
eat() {
//2.因为刚才传递过来的this = longEar
//所以this.__proto__.eat.call(this)变成了longEar.__proto__.eat.call(this)
//又是rabbit.eat，所以rabbit.eat在不停地循环调用自己，因此它无法进一步的提升
this.__proto__.eat.call(this); // (*)
}
};
let longEar = {
__proto__: rabbit,
eat() {
//1.在调用原型（rabbit）中的call方法，提供了调用对象this = longEar
this.__proto__.eat.call(this); // (**)
}
};
longEar.eat(); // Error: Maximum call stack size exceeded
[[HomeObject]]
- 当一个函数被定义为类或者对象方法时，它的 [[HomeObject]] 属性就成为了该对象。
- 然后 super 使用它来解析（resolve）父原型及其方法。
let animal = {
name: "Animal",
eat() {
// animal.eat.[[HomeObject]] == animal
alert(`${
this.name} eats.`);
}
};
let rabbit = {
__proto__: animal,
name: "Rabbit",
eat() {
// rabbit.eat.[[HomeObject]] == rabbit
super.eat();
}
};
let longEar = {
__proto__: rabbit,
name: "Long Ear",
eat() {
// longEar.eat.[[HomeObject]] == longEar
super.eat();
}
};
// 正确执行
longEar.eat(); // Long Ear eats.
- 它基于 [[HomeObject]] 运行机制按照预期执行。一个方法，例如 longEar.eat，知道其 [[HomeObject]] 并且从其原型中获取父方法。并没有使用 this。
方法并不是自由的
- 函数通常都是自由的，它并没有绑定Javascript中的对象。正因如此，他们可以在对象之间复制，并用另一个this调用它
[[HomeObject]]的存在违反了这个原则，因为方法记住了它们的对象。[[HomeObject]] 不能被更改，所以这个绑定是永久的。- 在 JavaScript 语言中
[[HomeObject]] 仅被用于 super。所以，如果一个方法不使用 super，那么我们仍然可以视它为自由的并且可在对象之间复制。但是用了 super 再这样做可能就会出错。
let animal = {
sayHi() {
//3.animal和这个sayHi绑定在一起(它的[[HomeObject]]是animal)，只要调用这个sayHi，就一定是animal调用
alert(`I'm an animal`);
}
};
// rabbit 继承自 animal
let rabbit = {
__proto__: animal,
sayHi() {
//2.rabbit和这个sayHi绑定在一起(它的[[HomeObject]]是rabbit)，只要调用这个sayHi，就一定是rabbit调用
super.sayHi();
}
};
let plant = {
sayHi() {
alert("I'm a plant");
}
};
// tree 继承自 plant
let tree = {
__proto__: plant,
sayHi: rabbit.sayHi // 1.tree.sayHi 方法是从 rabbit 复制而来
};
tree.sayHi(); // I'm an animal (?!?)
方法，不是函数属性
[[HomeObject]]是为类和普通对象中的方法定义的。但是对于对象而言，方法必须确切指定为method()，而不是 “method: function()”。
let animal = {
eat: function() {
// 这里是故意这样写的，而不是 eat() {...
// ...
}
};
let rabbit = {
__proto__: animal,
eat: function() {
//[[HomeObject]]属性是对于方法来说的，而不是属性
super.eat();
}
};
rabbit.eat(); // 错误调用 super（因为这里没有 [[HomeObject]]）