捋一遍 JavaScript 的继承

继承( inheritance )

继承（英语：inheritance）是面向对象软件技术当中的一个概念。如果一个类别A“继承自”另一个类别B，就把这个A称为“B的子类别”，而把B称为“A的父类别”也可以称“B是A的超类”。继承可以使得子类别具有父类别的各种属性和方法，而不需要再次编写相同的代码。在令子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能。另外，为子类别追加新的属性和方法也是常见的做法。

• 接口继承

• 实现继承

从原型链说起

prototype、[[Prototype]] 与 __proto__

• 对象的prototype属性是一个指向其原型对象的指针。

• 对象实例( Instance )内部的[[Prototype]]属性是一个指向该对象的原型对象的指针，它是一个特殊的、隐形的属性，无法读取。

• __proto__是[[Prototype]]的一个setter版本，通过如下方式可以设置一个实例的[[Prototype]]的指向：

function Foo() {};
instance.__proto__ = Foo.prototype;

• Construtor 代表构造函数；constructor 代表指向构造函数的指针。

• Prototype 代表原型对象；prototype 代表指向原型对象的指针。

• [[Prototype]] 代表实例中指向原型对象的内部指针。

原型链的实现

每个实例对象（object ）都有一个私有属性（称之为 [[Prototype]] ）指向它的原型对象。该原型对象也有一个自己的原型对象 ，这样层层向上直到 Object.prototype 。

function SuperFoo() {
    this.superBar = 'superBar';
}

SuperFoo.prototype.getSuperBar = function() {
    return this.superBar;
}

function SubFoo() {
    this.subBar = 'subBar';
}

// 通过让原型对象等于另一个类型的实例实现继承
SubFoo.prototype = new SuperFoo();

SubFoo.prototype.getSubBar = function() {
  return this.subBar;
}

let instance = new SubFoo();
console.log(instance);

// [object Object] {
//   getSubBar: function () {
//   return this.subBar;
// },
//   getSuperBar: function () {
//     return this.superBar;
// },
//   subBar: "subBar",
//   superBar: "superBar"
// }

> consle.log(SubType.prototype.constructor);

// function SuperFoo() {
//  this.superBar = 'superBar';
// }

原型搜索机制

引用类型的默认原型

JavaScript 继承的几种模式

组合继承( Combination Inheritance )

1. 当一个原型对象中包含值为引用类型的属性时，这个属性会被所有实例共享；并且，即使该属性被定义在构造函数中，通过原型来实现继承时，原先的构造函数中的属性也会变成现在的原型属性，被所有实例所共享。 我们可以通过一个例子体验一下：

function SuperFoo() {
    this.superBar = 'superBar';
    this.arr = [1, 2, 3, 4];
}

SuperFoo.prototype.getSuperBar = function() {
    return this.superBar;
}

function SubFoo() {
    this.subBar = 'subBar';
}

SubFoo.prototype = new SuperFoo();

SubFoo.prototype.getSubBar = function() {
  return this.subBar;
}

let instanceA = new SubFoo();
instanceA.arr.push(5);
console.log(instanceA.arr); // [1, 2, 3, 4, 5]

let instanceB = new SubFoo();
instanceB.arr.push(6);
console.log(instanceB.arr); // [1, 2, 3, 4, 5, 6]

1. 在创建子类型的实例时，不能向父类型的构造函数中传参。

function SuperFoo(color) {
 this.color = color;
 this.tagList = ['a', 'b', 'c', 'd'];
}

SuperFoo.prototype.getColor = function() {
 return this.color;
}

function SubFoo(color, size) {
+   SuperFoo.call(this, color);
 this.size = size;
}

SubFoo.prototype = new SuperFoo();
+ SubFoo.prototype.constructor = SuperFoo;
SubFoo.prototype.getSize = function() {
return this.size;
}

let instanceA = new SubFoo('green', 20);
instanceA.tagList.push('e');
console.log(instanceA.tagList); // ['a', 'b', 'c', 'd', 'e'];
console.log(instanceA.getSize()); // 20
console.log(instanceA.getColor()); // 'green'

let instanceB = new SubFoo('black', 0);
instanceB.tagList.push('f');
console.log(instanceB.tagList); // ['a', 'b', 'c', 'd', 'f'];
console.log(instanceB.getSize()); // 0
console.log(instanceB.getColor()); // 'black'

• SuperFoo.call(this, color);

• SubFoo.prototype = new SuperFoo();

原型式继承( Prototypal Inheritance )

function object(obj) {
    function F() {};
    F.prototype = obj;
    return new F();
}

let superFoo = {
    color: 'green',
    size: 'small'
};

let subFoo = Object.create(superFoo, {
    tag: {
        value: 'a'
    }
});
subFoo.color = 'yellow';

console.log(subFoo); // {color: "yellow", tag: "a"}
console.log(subFoo.size); // 'small'

function SuperFoo(color) {
    this.color = color;
    this.tagList = ['a', 'b', 'c', 'd'];
}

SuperFoo.prototype.getColor = function() {
    return this.color;
}

function SubFoo(color, size) {
    SuperFoo.call(this, color);
    this.size = size;
}

SubFoo.prototype = Object.create(SuperFoo.prototype);
SubFoo.prototype.getSize = function() {
  return this.size;
}

let instance = new SubFoo('green', 20);
instance.tagList.push('7');
console.log(instance); // {color: "green", tagList: Array(4), size: 20}
console.log(instance instanceof SuperFoo); // true

寄生式继承( Parasitic Inheritance )

function createSubOne(superOne) {
    let subOne = object(superOne);
    subOne.printInfo = function() {
        console.log('info');
    }
    return subOne;
}

寄生组合式继承( Parasitic Combination Inheritance )

function inheritPrototype(subType, superType) {
    let prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperFoo(color) {
    this.color = color;
    this.tagList = ['a', 'b', 'c', 'd'];
}

SuperFoo.prototype.getColor = function() {
    return this.color;
}

function SubFoo(color, size) {
    SuperFoo.call(this, color);
    this.size = size;
}

+ inheritPrototype(SubFoo, SuperFoo);
SubFoo.prototype.getSize = function() {
  return this.size;
}

let instance = new SubFoo('green', 20);

ES6 中的 class

function Foo(x, y) {
    this.x = x;
    this.y = y
}

Foo.prototype.describe = function () {
    return this.x + ',' + this.y;
}

class Foo {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    toString() {
        return `${this.x}, ${this.y}`;
    }
}

声明 class 并不发生变量提升

foo(); // no error

function foo() {};

new Foo(); // ReferenceError

class Foo {}

ES6 中的继承写法

class SuperFoo {
    constructor(color) {
        this.color = color;
        this.tagList = ['a', 'b', 'c', 'd'];
    }
    
    getColor() {
        return this.color;
    }
}

class SubFoo extends SuperFoo {
    constructor(color, size) {
        super(color);
        this.size = size;
    }
    
    getSize() {
        return this.size;
    }
}

console.log(Object.getPrototypeOf(SubFoo) === SuperFoo); // true

class SubFoo extends SuperFoo {
    // ....
    
    printColor() {
        console.log(super.getColor());
    }
}

小结

参考资料

• Exploring ES6

• 《JavaScript 高级程序设计》