[JavaScript知识库]【JavaScript】js中的原型继承

1. 理解继承

继承是面向对象编程的三大特性之一(封装、继承、多态)。

多个类中存在相同的属性和行为，将这些内容抽取到单独一个类中，那么多个类无需再定义这些属性和行为，只需要继承那个类即可。
多个类可以称为子类，单独的这个类称为父类或者超类，基类等。 子类可以直接访问父类中的非私有的属性和行为。

以人类为例，地球人都是一个脑袋，双手双脚，很多基本特征都是一样的。
但人类也有细分种类：黄种人、白种人、黑种人。
我们要定义三种人，在共同特征的基础上区别皮肤颜色即可。

如果用代码封装，咱们就可以将人类定义为基类或者超类，拥有脑袋、手、足等属性，说话、走路等行为。黄种人、白种人、黑种人为子类，自动复制父类的属性和行为到自身，然后在此基础上新增或者重写某些属性和行为，例如黄种人拥有黄皮肤、黑头发。这就是继承的思想。

2. js中的继承(原型继承)

在其他面向类语言中，继承意味着复制操作，子类是实实在在地将父类的属性和方法复制了过来。

但javascript中的继承不是这样的。根据原型的特性，js中继承的本质是一种委托机制，对象可以将需要的属性和方法委托给原型，需要用的时候就去原型上拿，这样多个对象就可以共享一个原型上的属性和方法，这个过程中是没有复制操作的。

javascript中的继承主要还是依靠于原型链，原型处于原型链中时即可以是某个对象的原型也可以是另一个原型的实例，这样就能形成原型之间的继承关系。

3. js6种继承方式

3.1 原型链继承

直接利用原型链特征实现的继承：子类构造函数的prototype指向父类构造函数的实例。

function Person() {
    this.head = 1;
    this.hand = 2;
}

function YellowRace() {

}

// 实现继承
YellowRace.prototype = new Person();

const hjy = new YellowRace();

console.log(hjy.head); // 1
console.log(hjy.hand); // 2

根据原型链的特性，当我们查找hjy实例的head和hand属性时，由于hjy本身并没有这两个属性，引擎就会去查找hjy的原型，还是没有，继续查找hjy原型的原型，也就是Person原型对象，结果就找到了。就这样，YellowRace和Person之间通过原型链实现了继承关系。

问题：

1. 创建子类的时候，不能给父类的构造函数传递参数。
2. 当原型上的属性是引用数据类型时，所有实例都会共享这个属性，即某个实例对这个属性重写会影响其他实例。

function Person() {
    this.colors = ['white','yellow','black'];
}

function YellowRace() {

}

// 实现继承
YellowRace.prototype = new Person();

const hjy = new YellowRace();
hjy.colors.push('green');
// ['white', 'yellow', 'black', 'green']
console.log(hjy.colors) 


const laowang = new YellowRace();
// ['white', 'yellow', 'black', 'green']
console.log(laowang.colors) 

可以看到，hjy只是想给自己的生活增添一点绿色，但是却被laowang给享受到了，这肯定不是我们想看到的结果。

为了解决不能传参以及引用类型属性共享的问题，一种叫盗用构造函数的实现继承的技术应运而生。

3.2 盗用构造函数

盗用构造函数也叫作“对象伪装”或者“经典继承”，原理就是通过在子类中调用父类构造函数实现上下文的绑定。

function Person(eyes){
    this.eyes = eyes;
    this.color = ['white','yellow','black'];
}

function YellowRace(){
    Person.call(this,'black');
}

const hjy = new YellowRace();
hjy.color.push('green');
// [ 'white', 'yellow', 'black', 'green' ]
console.log(hjy.color);
// black
console.log(hjy.eyes);

const laowang = new YellowRace();
// [ 'white', 'yellow', 'black' ]
console.log(laowang.color);
// black
console.log(laowang.eyes);

优点：

1. 解决了父类中的属性是引用类型同步修改的问题。
2. 可以传递参数。

问题：

1. 必须在构造函数中定义方法，通过盗用构造函数继承的方式本质上都变成了实例自己的方法，不是公共的方法，因此失去了复用性。
2. 子类不能访问父类原型上定义的方法。

function Person(eyes){
    this.eyes = eyes;
    this.getEyes = function() {
        return this.eyes;
    }
}
Person.prototype.ReturnEyes = function() {
    return this.eyes;
}


function YellowRace(){
    Person.call(this,'black');
}

const nz = new YellowRace();
console.log(nz.getEyes()); // black
console.log(nz.ReturnEyes());// TypeError: nz.ReturnEyes is not a function

3.3 组合继承

原型链继承和盗用构造函数继承都有各自的缺点，而组合继承综合了前两者的优点，取其精华去其糟粕，得到一种可以将方法定义在原型上以实现重用又可以让每个实例拥有自己的属性的继承方案。

组合继承的原理

1. 先通过盗用构造函数实现上下文绑定和传参

2. 再使用原型链继承的手段将子构造函数的prototype指向父构造函数的实例。

function Person(eyes) {
    this.eyes = eyes
    this.colors = ['white', 'yellow', 'black']
}
Person.prototype.getEyes = function () {
    return this.eyes
}


function YellowRace(){
    Person.call(this,'black');// 调用构造函数并传参
}


YellowRace.prototype = new Person(); // 再次调用构造函数


const nz = new YellowRace();
nz.colors.push('green');

const laowang = new YellowRace();

console.log(nz.colors); //[ 'white', 'yellow', 'black', 'green' ]
console.log(laowang.colors); //[ 'white', 'yellow', 'black' ]

console.log(nz.getEyes()); //black 

问题：

1. 调用了两次父类的构造函数，有一定程度的性能浪费。

3.4 原型式继承

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

使用场合：

1. 没必要构建构造函数，仅仅需要模拟一个对象。
2. 如果你有一个已知的对象，想在它的基础上再创建一个新对象，那么你只需要把已知对象传给object函数即可。

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

const nz = {
    eyes: 'black',
    colors: ['white', 'yellow', 'black']
}
  
const laowang = object(nz)
console.log(laowang.eyes) // black
console.log(laowang.colors) // ['white', 'yellow', 'black']

ES6新增了一个方法Object.create()将原型式继承规范化。

Object.create()可以接受两个参数：

1. 第一个参数作为新对象原型的对象。
2. 第二个参数也是对象。里面放入给新对象添加的属性(可选)。以这种方式添加的属性会遮蔽原型上的同名属性。

当Object.create()只传入第一个参数时，功效与上述的object()方法是相同的。

const hjy = {
    eyes: 'black',
    colors: ['white', 'yellow', 'black']
}
  
const laowang = Object.create(hjy, {
    name: {
      value: '老王',
      writable: false,
      enumerable: true,
      configurable: true
    },
    age: {
      value: '32',
      writable: true,
      enumerable: true,
      configurable: false
    }
})
console.log(laowang.eyes) // black
console.log(laowang.colors) // ['white', 'yellow', 'black']
console.log(laowang.name) // 老王
console.log(laowang.age) // 32

原型式继承和原型链继承的本质基本一致

缺点：

1. 使用手写的object()不能传参，使用Object.create()可以传参
2. 原对象中的引用类型的属性会被新对象共享。

3.5 寄生式继承

思想：在原型式继承的基础上以某种形式增强对象，然后返回这个对象。

function inherit(o){
    let clone = Object.create(o); // 增强对象
    clone.sayHi = function(){
        console.log('hi');
    };
    return clone;
}

const nz = {
    eyes: 'black',
    colors: ['white', 'yellow', 'black']
}

const laowang = inherit(nz);
console.log(laowang.eyes);  // black
console.log(laowang.colors); // [ 'white', 'yellow', 'black' ]

laowang.sayHi(); // hi

3.6 寄生式组合继承

寄生式组合继承通过盗用构造函数继承属性，但使用混合式原型链继承方法。

基本思路

• 使用寄生式继承来继承父类的原型对象

• 然后将返回的新对象赋值给子类的原型对象。

寄生式继承的核心逻辑实现：

function inherit(Father,Son){
    // 获取父类原型对象副本
    const prototype = Object.create(Father.prototype);

    // 将获取的副本的constructor指向子类，以此增强副本原型对象
    prototype.constructor = Son;

    // 将子类的原型对象指向副本原型对象
    Son.prototype = prototype;
}

这里没有将新建的对象返回出来，而是赋值给了子类的原型对象。

**改造组合式继承：**将第二次调用构造函数的逻辑替换为寄生式继承

function inherit(Father,Son){
    // 获取父类原型对象副本
    const prototype = Object.create(Father.prototype);

    // 将获取的副本的constructor指向子类，以此增强副本原型对象
    prototype.constructor = Son;

    // 将子类的原型对象指向副本原型对象
    Son.prototype = prototype;
}


function Person(eyes){
    this.eyes = eyes;
    this.colors = ['white', 'yellow', 'black']
}
Person.prototype.getEyes = function(){
    return this.eyes;
}


function YellowRace(){
    Person.call(this,'black');  // 调用构造函数传参
}

inherit(Person,YellowRace);// 寄生式继承,不用二次调用构造函数

const nan = new YellowRace();
nan.colors.push('green');

const laowang = new YellowRace();
console.log(laowang.colors);  // [ 'white', 'yellow', 'black' ]
console.log(nan.getEyes()); // black

4. instanceof

instanceof操作符左侧是一个普通对象，右侧是一个函数。

以o instanceof Foo为例，instanceof关键字做的事情是：判断o的原型链上是否有Foo.prototype指向的对象。

function Perosn(name) {
    this.name = name
  }
  
const hjy = new Perosn('滑稽鸭')
  
const laowang = {
    name: '老王'
}
  
console.log(hjy instanceof Perosn) // true
console.log(laowang instanceof Perosn) // false

5. isPrototypeOf()

isPrototypeOf()不关心构造函数，它只需要一个可以用来判断的对象就行。

以Foo.prototype.isPrototypeOf(o)为例，isPrototypeOf()做的事情是：判断在a的原型链中是否出现过Foo.prototype。

function Perosn(name) {
    this.name = name
  }
  
const hjy = new Perosn('滑稽鸭')
  
const laowang = {
    name: '老王'
}
  
console.log(Perosn.prototype.isPrototypeOf(hjy)) // true
console.log(Perosn.prototype.isPrototypeOf(laowang)) // false

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生