Javascript面向对象(九)——类继承
类可以继承另一个类。有漂亮的语法，技术上基于原型继承。
为了从另一个类继承，我们应该指定“extends”关键字，并且把父类写在括号{...}之前。
下面示例代码中Rabbit类继承自Animal类：
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} stopped.`);
}
}
// Inherit from 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到Animal.prototype,正如你期望的一样，下面图示我们之前也见过：
所以现在rabbit对象能访问自己的方法，也可以访问来自父类Animal的方法。
任何表达式都可以在extends之后
继承语法允许继承不仅是类，在extens之后可以为任意表达式。
示例，一个函数调用生成父类：
function f(phrase) {
return class {
sayHi() { alert(phrase) }
}
}
class User extends f("Hello") {}
new User().sayHi(); // Hello
这里类User 继承自f(“hello”)函数的调用结果。
这可能在一些高级编程模型中非常有用，我们使用函数依赖很多条件生成类，然后可以从它们继承。
方法覆盖
现在让我们继续学习方法覆盖。截至目前，Rabbit继承了Animal类的stop方法，并设置this.speed = 0
如果我们在Rabbit中指定我们自己的方法stop，那么则会覆盖父类方法并使用。
class Rabbit extends Animal {
stop() {
// ...this will be used for rabbit.stop()
}
}
但通常我们并不想完全替代父类的方法，而是构建在其之上，稍微调整或扩展其功能。我们实现在实现方法中增加一些功能，但这过程中或前后调用父类的方法。Javascript提供了关键自“super”可以实现。
- super.method(…) 调用父类方法
- super(…) 调用父类构造函数（只能在构造函数内部调用）
举例，让rabbit对象调用stop方式，自动隐藏。
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} stopped.`);
}
}
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
stop() {
super.stop(); // call parent stop
hide(); // and then hide
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.stop(); // White Rabbit stopped. White rabbit hides!
现在，Rabbit有stop方法，其首先调用了父类的方法，super.stop() .
箭头函数没有super
箭头函数不能有super，如果使用，实际是调用外部函数，示例：
class Rabbit extends Animal {
stop() {
setTimeout(() => super.stop(), 1000); // call parent stop after 1sec
}
}
这里super在箭头函数中，和在stop()方法是一样的，所以如我们期望的一样。
如果我们在一般的函数中使用，会抛出错误：
// Unexpected super
setTimeout(function() { super.stop() }, 1000);
覆盖构造函数
构造函数覆盖有点棘手。
到目前为止，Rabbit类没有自己的构造函数。根据规范，如果一个类继承自另一个类，没有提供构造函数，那么自动生成一个构造函数：
class Rabbit extends Animal {
// generated for extending classes without own constructors
constructor(...args) {
super(...args);
}
}
我们看到，基本上是调用父类构造函数，并传入所有参数。因为如果我们不写构造函数，就会这样。
现在，我们增加自己的构造函数，在name的基础上指定earLength属性。
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
this.speed = 0;
this.name = name;
this.earLength = earLength;
}
// ...
}
// Doesn't work!
let rabbit = new Rabbit("White Rabbit", 10); // Error: this is not defined.
啊！居然出错了，我们不能创建rabbit对象，怎么出错了呢？
简短的答案是：继承类的构造函数必须调用super(…),而其之前不能使用this关键字。
但是为什么？这时怎么回事？事实上，这个需求有点奇怪。
当然，有个合理的解释，让我们进入细节，这样你能真正理解发生了什么？
在Javascript中，继承类的构造函数与一般构造函数有区别。
在继承类中，相应的构造函数用一个特定的内部属性[[ConstructorKind]]:"derived"标记（派生的）。区别是：
- 当正常的构造函数运行时，它创建一个空对象赋值给this，然后继续。
- 但派生类构造函数运行时，它没有这么做，它期望父类构造函数做这个工作。
所以我们创建自己的构造函数，必须调用super，否则this引用的对象没有被创建，导致错误。
让Rabbit正常，在使用this之前需要调用super()，代码如下：
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
// ...
}
class Rabbit extends Animal {
constructor(name, earLength) {
super(name);
this.earLength = earLength;
}
// ...
}
// now fine
let rabbit = new Rabbit("White Rabbit", 10);
alert(rabbit.name); // White Rabbit
alert(rabbit.earLength); // 10
Super:内部的，[[HomeObject]]
让我们深入super的底层，顺便可以看到一些有趣的事情。
首先要说的，从我们已经学习的内容，super不可能实现。
是的，确实是的，让我们问自己，技术上super是如何工作的？当对象方法执行是，系统获得当前对象作为this。
如果我们调用super.method()时，如何返回方法？换句话说，我们需要从当前对象的父原型中获得方法，那么Javascript引擎在技术上是如何实现的？
可能我们获得this的[[prototype]],然后通过this.__proto__.method?不幸的是，这样不行。
让我们试着去做，不使用类，使用普通对象纯粹为了简化。
这里，rabbit.eat()应该调用animal.eat()，父对象的方法：
let animal = {
name: "Animal",
eat() {
alert(this.name + " eats.");
}
};
let rabbit = {
__proto__: animal,
name: "Rabbit",
eat() {
this.__proto__.eat.call(this); // (*)
}
};
rabbit.eat(); // Rabbit eats.
在型号行，我们从原型(animal)中获得eat方法，并在当前对象的上下文中调用它。请注意.call(this)是很重要的，因为简单的this.__proto__.eat()执行原型上下文中的父对象的eat方法，不是当前对象。这里一切如愿。
现在让我们增加更多的链，我们将发现意外：
let animal = {
name: "Animal",
eat() {
alert(this.name + " eats.");
}
};
let rabbit = {
__proto__: animal,
eat() {
// ...bounce around rabbit-style and call parent (animal) method
this.__proto__.eat.call(this); // (*)
}
};
let longEar = {
__proto__: rabbit,
eat() {
// ...do something with long ears and call parent (rabbit) method
this.__proto__.eat.call(this); // (**)
}
};
longEar.eat(); // Error: Maximum call stack size exceeded
这代码不再工作，当我们调用longEar.eat()时出现错误。
可能不直观，但如果我们跟踪longEar.eat()调用，可以看到原因。有星号的两行，this的值是当前对象（longEar）。
这是基本的：所有对象方法获得当前对象作为this，不是原型或其他。
所以，两行带星号中的this.proto显然是相同的：rabbit，他们都调用rabbit.eat，没有向上寻找原型链。
换句话说：
1、在longEar.eat()里，我们经过向上调用rabbit.eat，给它相同的this=longEar 。
// inside longEar.eat() we have this = longEar
this.__proto__.eat.call(this) // (**)
// becomes
longEar.__proto__.eat.call(this)
// or
rabbit.eat.call(this);
2、在 rabbit.eat中，我们想通过调用原型链中更高层的方法，但是this=longEar,所以this.proto.eat是rabbit.eat !
// inside rabbit.eat() we also have this = longEar
this.__proto__.eat.call(this) // (*)
// becomes
longEar.__proto__.eat.call(this)
// or (again)
rabbit.eat.call(this);
3、所以rabbit.eat调用自身，进入死循环，因为它不能进一步向上执行。
这个问题是无法解决，因为this必须总是调用对象自身，无论那个父对象调用。所以它的原型总是直接父对象，我们不能向上获得原型链。
[[HomeObject]]
为了提供解决方案，Javascript给函数增加一个特殊内部属性：[[HomeObject]].
当一个函数被指定作为类或对象方法时，它的[[HomeObject]]属性为那个对象。
这实际上违背了函数“不绑定”的思想，因为方法记住对应的对象，[[HomeObject]]不能被改变，所以这绑定是永久的，所以这是Javascript语言很重要的改变。
但这个改变是安全的，[[HomeObject]]仅用于通过super调用父类方法中，为了解决通过原型无法实现功能，所以没有打破兼容性。
让我们再看super如何工作的，仍使用普通对象：
let animal = {
name: "Animal",
eat() { // [[HomeObject]] == animal
alert(this.name + " eats.");
}
};
let rabbit = {
__proto__: animal,
name: "Rabbit",
eat() { // [[HomeObject]] == rabbit
super.eat();
}
};
let longEar = {
__proto__: rabbit,
name: "Long Ear",
eat() { // [[HomeObject]] == longEar
super.eat();
}
};
longEar.eat(); // Long Ear eats.
每个方法记住对应对象在内部[[HomeObject]]属性中，然后super用它获得父原型。
[[HomeObject]]被定义在类或对象的方法中，对于对象，方法必须通过如method()方式指定，不能是method: function()方式。
在下面示例中，使用非方法语法用于比较，[[HomeObject]]属性没有被设置，继承不会起作用：
let animal = {
eat: function() { // should be the short syntax: eat() {...}
// ...
}
};
let rabbit = {
__proto__: animal,
eat: function() {
super.eat();
}
};
rabbit.eat(); // Error calling super (because there's no [[HomeObject]])
静态方法和继承
类的语法也支持静态成员继承。举例：
class Animal {
constructor(name, speed) {
this.speed = speed;
this.name = name;
}
run(speed = 0) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
static compare(animalA, animalB) {
return animalA.speed - animalB.speed;
}
}
// Inherit from Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbits = [
new Rabbit("White Rabbit", 10),
new Rabbit("Black Rabbit", 5)
];
rabbits.sort(Rabbit.compare);
rabbits[0].run(); // Black Rabbit runs with speed 5.
现在我们能调用Rabbit.compare，假设其继承自Animal.
如何工作的呢？使用原型，你可能已经猜到了。扩展也给Rabbit的属性[[Prototype]]引用Animal。
所以，Rabbit函数现在继承自Animal函数，Animal函数正常有[[Prototype]]属性，引用Function.prototype,因为它没有扩展任何其他对象。
我们检查看看：
class Animal {}
class Rabbit extends Animal {}
// for static propertites and methods
alert(Rabbit.__proto__ == Animal); // true
// and the next step is Function.prototype
alert(Animal.__proto__ == Function.prototype); // true
// that's in addition to the "normal" prototype chain for object methods
alert(Rabbit.prototype.__proto__ === Animal.prototype);
这样Rabbit能访问所有Animal类静态的方法。
请注意内置类没有这样静态[[Prototype]]引用。如Object有Object.defineProperty,Object.keys等，但是Array，Date等没有继承它们。
这里是Date和Object的图示结构：
注意，Date和Object之间没有链接，两者之间独立存在。Date.prototype继承自Object.prototype，但这也就是全部了。
由于历史原因存在这样差异：在Javascript开始阶段，没有考虑类语法和继承静态方法。
扩展内置类
内置的一些类，如Array，Map等也可以扩展。举例，PowerArray继承自内置类Array。
// add one more method to it (can do more)
class PowerArray extends Array {
isEmpty() {
return this.length == 0;
}
}
let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false
let filteredArr = arr.filter(item => item >= 10);
alert(filteredArr); // 10, 50
alert(filteredArr.isEmpty()); // false
注意一个有趣的事情，内置方法如fliter，map等返回正是继承类型（子类）的对象，依赖构造器属性实现。
上面示例中：
arr.constructor === PowerArray
所以当arr.filter()被调用时，内部正是通过new PowerArray创建新数组，我们可以使用原型链中更深层的方法。
而且，我们可以自定义行为，静态getter Symbol.species,如果存在，返回使用的构造器。
举例，这里由于Symbol.species，内置方法如map，fliter将返回正常数组：
class PowerArray extends Array {
isEmpty() {
return this.length == 0;
}
// built-in methods will use this as the constructor
static get [Symbol.species]() {
return Array;
}
}
let arr = new PowerArray(1, 2, 5, 10, 50);
alert(arr.isEmpty()); // false
// filter creates new array using arr.constructor[Symbol.species] as constructor
let filteredArr = arr.filter(item => item >= 10);
// filteredArr is not PowerArray, but Array
alert(filteredArr.isEmpty()); // Error: filteredArr.isEmpty is not a function
我们能使用在更高级的关键点，如果我们不需要，可以去除一些扩展功能，或许进一步扩展。
本文参考链接：https://blog.csdn.net/neweastsun/article/details/71374659
