JavaScript 继承-优快云博客

重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个属性（constructor）指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。这就是原型链的基本构想。

function SuperType() {
    this.property = true;
  }
  SuperType.prototype.getSuperValue = function() {
    return this.property;
  };
  function SubType() {
    this.subproperty = false;
  }
  // 继承SuperType
  SubType.prototype = new SuperType();
  SubType.prototype.getSubValue = function () {
    return this.subproperty;
  };
  let instance = new SubType();
  console.log(instance.getSuperValue()); // true

图示

1.1 默认原型

默认情况下，所有引用类型都继承自Object，这也是通过原型链实现的。任何函数的默认原型都是一个Object的实例，这意味着这个实例有一个内部指针指向Object.prototype。

完整原型链

1.2 原型与继承关系

1.使用instanceof操作符，如果一个实例的原型链中出现过相应的构造函数，则instanceof返回true

console.log(instance instanceof Object);      // true
console.log(instance instanceof SuperType);   // true
console.log(instance instanceof SubType);     // true

2.使用isPrototypeOf()方法，只要原型链中包含这个原型，这个方法就返回true

console.log(Object.prototype.isPrototypeOf(instance));      // true
console.log(SuperType.prototype.isPrototypeOf(instance));   // true
console.log(SubType.prototype.isPrototypeOf(instance));     // true

2.继承

2.1 盗用构造函数继承

解决原型包含引用值导致的继承问题（修改引用值不影响其它实例）

在子类构造函数中调用父类构造函数，使用apply()和call()方法以新创建的对象为上下文，执行构造函数，结果：每个实例都会有自己的colors属性。

function SuperType() {
    this.colors = ["red", "blue", "green"];
  }
  function SubType() {
    //继承SuperType
    SuperType.call(this);
  }
  let instance1 = new SubType();
  instance1.colors.push("black");
  console.log(instance1.colors); // "red, blue, green, black"
  let instance2 = new SubType();
  console.log(instance2.colors); // "red, blue, green"

2.1.1 传递参数

function SuperType(name){
    this.name = name;
  }
  function SubType() {
    // 继承SuperType并传参
    SuperType.call(this, "Nicholas");
    // 实例属性
    this.age = 29;
  }
  let instance = new SubType();
  console.log(instance.name); // "Nicholas";
  console.log(instance.age);   // 29

2.1.2 盗用构造函数的问题

必须在构造函数中定义方法，因此函数不能重用。

子类也不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模式。

2.2 组合继承

组合继承（有时候也叫伪经典继承）综合了原型链和盗用构造函数；

使用原型链继承原型上的属性和方法，通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。来看下面的例子：

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    console.log(this.name);
  };
  function SubType(name, age){
    // 继承属性
    SuperType.call(this, name);
    this.age = age;
  }
  // 继承方法
  SubType.prototype = new SuperType();
  SubType.prototype.contructor = subType;
  SubType.prototype.sayAge = function() {
    console.log(this.age);
  };
  let instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  console.log(instance1.colors);   // "red, blue, green, black"
  instance1.sayName();               // "Nicholas";
  instance1.sayAge();                // 29
  let instance2 = new SubType("Greg", 27);
  console.log(instance2.colors);   // "red, blue, green"
  instance2.sayName();               // "Greg";
  instance2.sayAge();

2.3 原型式继承

不定义类型也可以通过原型实现对象之间的信息共享

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

object()函数会创建一个临时构造函数，将传入的对象赋值给这个构造函数的原型，然后返回这个临时类型的一个实例。本质上，object()是对传入的对象执行了一次浅复制。来看下面的例子：

let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
  let anotherPerson = object(person);
  anotherPerson.name = "Greg";
  anotherPerson.friends.push("Rob");
  let yetAnotherPerson = object(person);
  yetAnotherPerson.name = "Linda";
  yetAnotherPerson.friends.push("Barbie");
  console.log(person.friends);   // "Shelby,Court,Van,Rob,Barbie"

ECMAScript 5通过增加Object.create()方法将原型式继承的概念规范化

let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
  let anotherPerson = Object.create(person);
  anotherPerson.name = "Greg";
  anotherPerson.friends.push("Rob");
  let yetAnotherPerson = Object.create(person);
  yetAnotherPerson.name = "Linda";
  yetAnotherPerson.friends.push("Barbie");
  console.log(person.friends);   // "Shelby,Court,Van,Rob,Barbie"

2.4 寄生式继承

与原型式继承比较接近的一种继承方式，创建一个实现继承的函数，以某种方式增强对象，然后返回这个对象。

function createAnother(original){
  let clone = object(original);   // 通过调用函数创建一个新对象
  clone.sayHi = function() {      // 以某种方式增强这个对象
    console.log("hi");
  };
  return clone;              // 返回这个对象
}

使用

let person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
  let anotherPerson = createAnother(person);
  anotherPerson.sayHi();   // "hi"

2.5 寄生式组合继承

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。基本思路是不通过调用父类构造函数给子类原型赋值，而是取得父类原型的一个副本。

寄生式组合继承的基本模式如下所示：

function inheritPrototype(subType, superType) {
    let prototype = object(superType.prototype);   // 创建对象
    prototype.constructor = subType;                  // 增强对象
    subType.prototype = prototype;                    // 赋值对象
  }

这个inheritPrototype()函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数：子类构造函数和父类构造函数。

1.在这个函数内部，第一步是创建父类原型的一个副本。

2.然后，给返回的prototype对象设置constructor属性，解决由于重写原型导致默认constructor丢失的问题。

3.最后将新创建的对象赋值给子类型的原型。

使用

// 原型式继承
function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
// 寄生式组合继承
function inheritPrototype(subtype, supertype) {
  let prototype = object(supertype.prototype);
  prototype.constructor = subtype;
  subtype.prototype = prototype;
}

function SuperType(name) {
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function() {
  console.log(this.name);
};
function SubType(name, age) {
  SuperType.call(this, name);
  this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function() {
  console.log(this.age);
};
let instance1 = new SubType('jie', 99);
instance1.sayName();
instance1.sayAge();

这里只调用了一次SuperType构造函数，效率更高。

注：子类添加原型方法需在inheritPrototype()方法执行之后。