好程序员分享JavaScript六种继承方式详解

好程序员 分享 JavaScript 六种继承方式详解 ， 继承是面向对象编程中又一非常重要的概念， JavaScript 支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的

我们提供的服务有：成都网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、海伦ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的海伦网站制作公司

 

原型链

 

首先得要明白什么是原型链，在一篇文章看懂 proto 和 prototype 的关系及区别中讲得非常详细

 

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

 

function SuperType() {

    this.property = true

}

 

SuperType.prototype.getSuperValue = function() {

    return this.property

}

 

function SubType() {

    this.subproperty = false

}

 

SubType.prototype = new SuperType()

 

SubType.prototype.getSubValue = function() {

    return this.subproperty

}

 

var instance = new SubType() console.log(instance.getSuperValue()) // true

代码定义了两个类型 SuperType 和 SubType ，每个类型分别有一个属性和一个方法， SubType 继承了 SuperType ，而继承是通过创建 SuperType 的实例，并将该实例赋给 SubType.prototype 实现的

 

实现的本质是重写原型对象 , 代之以一个新类型的实例，那么存在 SuperType 的实例中的所有属性和方法，现在也存在于 SubType.prototype 中了

 

我们知道，在创建一个实例的时候，实例对象中会有一个内部指针指向创建它的原型，进行关联起来，在这里代码 SubType.prototype = new SuperType() ，也会在 SubType.prototype 创建一个内部指针，将 SubType.prototype 与 SuperType 关联起来

 

所以 instance 指向 SubType 的原型， SubType 的原型又指向 SuperType 的原型，继而在 instance 在调用 getSuperValue() 方法的时候，会顺着这条链一直往上找

 

添加方法

 

在给 SubType 原型添加方法的时候，如果，父类上也有同样的名字， SubType 将会覆盖这个方法，达到重新的目的。 但是这个方法依然存在于父类中

 

记住不能以字面量的形式添加，因为，上面说过通过实例继承本质上就是重写，再使用字面量形式，又是一次重写了，但这次重写没有跟父类有任何关联，所以就会导致原型链截断

 

function SuperType() {

    this.property = true

}

 

SuperType.prototype.getSuperValue = function() {

    return this.property

}

 

function SubType() {

    this.subproperty = false

}

 

SubType.prototype = new SuperType()

 

SubType.prototype = {

    getSubValue: function() {

        return this.subproperty

    }

}

 

var instance = new SubType() console.log(instance.getSuperValue()) // error

问题

 

单纯的使用原型链继承，主要问题来自包含引用类型值的原型。

 

function SuperType() {

    this.colors = ['red', 'blue', 'green']

}

 

function SubType() {}

 

SubType.prototype = new SuperType()

 

var instance1 = new SubType() var instance2 = new SubType()

 

instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"]

console.log(instance2.colors) // ["red", "blue", "green", "black"]

在 SuperType 构造函数定义了一个 colors 属性，当 SubType 通过原型链继承后，这个属性就会出现 SubType.prototype 中，就跟专门创建了 SubType.prototype.colors 一样，所以会导致 SubType 的所有实例都会共享这个属性，所以 instance1 修改 colors 这个引用类型值，也会反映到 instance2 中

 

借用构造函数

 

此方法为了解决原型中包含引用类型值所带来的问题

 

这种方法的思想就是在子类构造函数的内部调用父类构造函数，可以借助 apply() 和 call() 方法来改变对象的执行上下文

 

function SuperType() {

    this.colors = ['red', 'blue', 'green']

}

 

function SubType() {

    // 继承 SuperType

    SuperType.call(this)

}

 

var instance1 = new SubType() var instance2 = new SubType()

 

instance1.colors.push('black') console.log(instance1.colors) // ["red", "blue", "green", "black"]

console.log(instance2.colors) // ["red", "blue", "green"]

在新建 SubType 实例是调用了 SuperType 构造函数，这样以来，就会在新 SubType 对象上执行 SuperType 函数中定义的所有对象初始化代码

 

结果， SubType 的每个实例就会具有自己的 colors 属性的副本了

 

传递参数

 

借助构造函数还有一个优势就是可以传递参数

 

function SuperType(name) {

    this.name = name

}

 

function SubType() {

    // 继承 SuperType

    SuperType.call(this, 'Jiang')

 

    this.job = 'student'

}

 

var instance = new SubType() console.log(instance.name) // Jiang

console.log(instance.job) // student

问题

 

如果仅仅借助构造函数，方法都在构造函数中定义，因此函数无法达到复用

 

组合继承 ( 原型链 + 构造函数 )

 

组合继承是将原型链继承和构造函数结合起来，从而发挥二者之长的一种模式

 

思路就是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

 

这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性

 

function SuperType(name) {

    this.name = name this.colors = ['red', 'blue', 'green']

}

 

SuperType.prototype.sayName = function() {

    console.log(this.name)

}

 

function SubType(name, job) {

    // 继承属性

    SuperType.call(this, name)

 

    this.job = job

}

 

// 继承方法

SubType.prototype = new SuperType() SubType.prototype.constructor = SuperType SubType.prototype.sayJob = function() {

    console.log(this.job)

}

 

var instance1 = new SubType('Jiang', 'student') instance1.colors.push('black') console.log(instance1.colors) //["red", "blue", "green", "black"]

instance1.sayName() // 'Jiang'

instance1.sayJob() // 'student'

var instance2 = new SubType('J', 'doctor') console.log(instance2.colors) // //["red", "blue", "green"]

instance2.sayName() // 'J'

instance2.sayJob() // 'doctor'

这种模式避免了原型链和构造函数继承的缺陷，融合了他们的优点，是最常用的一种继承模式

 

原型式继承

 

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型

 

function object(o) {

function F() {}

F.prototype = o

return new F()

}

在 object 函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例

 

本质上来说， object 对传入其中的对象执行了一次浅复制

 

var person = {

    name: 'Jiang',

    friends: ['Shelby', 'Court']

}

 

var anotherPerson = object(person) console.log(anotherPerson.friends) // ['Shelby', 'Court']

这种模式要去你必须有一个对象作为另一个对象的基础

 

在这个例子中， person 作为另一个对象的基础，把 person 传入 object 中，该函数就会返回一个新的对象

 

这个新对象将 person 作为原型，所以它的原型中就包含一个基本类型和一个引用类型

 

所以意味着如果还有另外一个对象关联了 person ， anotherPerson 修改数组 friends 的时候，也会体现在这个对象中

 

Object.create() 方法

 

ES5 通过 Object.create() 方法规范了原型式继承，可以接受两个参数，一个是用作新对象原型的对象和一个可选的为新对象定义额外属性的对象，行为相同，基本用法和上面的 object 一样，除了 object 不能接受第二个参数以外

 

var person = {

    name: 'Jiang',

    friends: ['Shelby', 'Court']

}

var anotherPerson = Object.create(person) console.log(anotherPerson.friends)

寄生式继承

 

寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数

 

function createAnother(o) {

    var clone = Object.create(o) // 创建一个新对象

    clone.sayHi = function() { // 添加方法

        console.log('hi')

    }

    return clone // 返回这个对象

}

 

var person = {

    name: 'Jiang'

}

 

var anotherPeson = createAnother(person) anotherPeson.sayHi()

基于 person 返回了一个新对象 anotherPeson ，新对象不仅拥有了 person 的属性和方法，还有自己的 sayHi 方法

 

在主要考虑对象而不是自定义类型和构造函数的情况下，这是一个有用的模式

 

寄生组合式继承

 

在前面说的组合模式 ( 原型链 + 构造函数 ) 中，继承的时候需要调用两次父类构造函数

 

父类

 

function SuperType(name) {

this.name = name

this.colors = ['red', 'blue', 'green']

}

第一次在子类构造函数中

 

function SubType(name, job) {

// 继承属性

SuperType.call(this, name)

 

this.job = job

}

第二次将子类的原型指向父类的实例

 

// 继承方法

SubType.prototype = new SuperType()

当使用 var instance = new SubType() 的时候，会产生两组 name 和 color 属性，一组在 SubType 实例上，一组在 SubType 原型上，只不过实例上的屏蔽了原型上的

 

使用寄生式组合模式，可以规避这个问题

 

这种模式通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

 

基本思路：不必为了指定子类型的原型而调用父类的构造函数，我们需要的无非就是父类原型的一个副本

 

本质上就是使用寄生式继承来继承父类的原型，在将结果指定给子类型的原型

 

function inheritPrototype(subType, superType) {

    var prototype = Object.create(superType.prototype);

    prototype.constructor = subType;

    subType.prototype = prototype;

}

该函数实现了寄生组合继承的最简单形式

 

这个函数接受两个参数，一个子类，一个父类

 

第一步创建父类原型的副本，第二步将创建的副本添加 constructor 属性，第三部将子类的原型指向这个副本

 

function SuperType(name) {

    this.name = name this.colors = ['red', 'blue', 'green']

}

 

SuperType.prototype.sayName = function() {

    console.log(this.name)

}

 

function SubType(name, job) {

    // 继承属性

    SuperType.call(this, name)

 

    this.job = job

}

 

// 继承

inheritPrototype(SubType, SuperType)

 

var instance = new SubType('Jiang', 'student') instance.sayName()

> 补充：直接使用 Object.create 来实现，其实就是将上面封装的函数拆开，这样演示可以更容易理解

 

function SuperType(name) {

    this.name = name this.colors = ['red', 'blue', 'green']

}

 

SuperType.prototype.sayName = function() {

    console.log(this.name)

}

 

function SubType(name, job) {

    // 继承属性

    SuperType.call(this, name)

 

    this.job = job

}

 

// 继承

SubType.prototype = Object.create(SuperType.prototype)

 

// 修复 constructor

SubType.prototype.constructor = SubType

 

var instance = new SubType('Jiang', 'student') instance.sayName()

ES6 新增了一个方法， Object.setPrototypeOf ，可以直接创建关联，而且不用手动添加 constructor 属性

网页名称：好程序员分享JavaScript六种继承方式详解
链接URL：http://scjbc.cn/article/gogggc.html