Javascript 中继承汇总

在阅读《Javascript高级程序设计》后的一些感想，顺便记录自己的学习，也希望能帮助到人，这就是我的初衷了。如文中有任何问题，也希望大家指正，以免误人子弟。

关于js的继承，我感觉更多的是一种探索得到的结果。因为像Java，C++ 等都是有明确的 class 定义类。但是在 Javascript 中的类和函数是无法区分的，我们似乎也只能定规范，比如构造函数模式，非严格规定：第一个字母大写的自定义函数就是构造函数。所以学继承似乎也是在阅览前辈们去提高代码复用，实现类效果的一个历史过程。

1. 原型链继承

基本思想: 利用原型让一个引用类型继承另一个引用类型的属性和方法

核心：原型链对象 变成 父类实例，子类就可以调用父类方法和属性。

function Parent() {
}
Parent.prototype.age = 18
Parent.prototype.getName = function () {
    return this.name
}

function Child(name) {
    this.name = name
}
Child.prototype = new Parent()

var child = new Child('leo')
// 这样子类就可以调用父类的属性和方法
console.log(child.getName())    // leo
console.log(child.age)          // 18
复制代码

优点：实现简单。

缺点：

1. 引用类型值的原型属性会被所有实例共享。
2. 不能向父类传递参数。

书中是说引用类型，而没事值类型，我认为是因为往往定义在父类的值类型都是用来做全局的。

function Parent() {
    this.likeFood = ['水果', '鸡', '烤肉']
}
Parent.prototype.age = 18
Parent.prototype.getName = function () {
    return this.name
}

function Child(name) {
    this.name = name
}
Child.prototype = new Parent()

var chongqiChild = new Child('重庆孩子')
var guangdongChild = new Child('广东孩子')

// 重庆孩子还喜欢吃花椒。。。
chongqiChild.likeFood.push('花椒')
console.log(chongqiChild.likeFood)      // ["水果", "鸡", "烤肉", "花椒"]
console.log(guangdongChild.likeFood)    // ["水果", "鸡", "烤肉", "花椒"]
复制代码

这时，会发现明明只是 重庆孩子 爱吃花椒， 广东孩子 莫名奇妙得也变得爱吃了？？？？这个共享是存在问题的，不科学的。（可能重庆孩子和广东孩子一起黑脸问号。。。）

至于第二个问题，其实也显而易见了，没有传递参数的途径。因此，第二种继承方式出来啦。

2. 借用构造函数继承

遗留问题：

1. 父类引用属性共享。
2. 不能传参数到父类。

核心：子类构造函数内部调用父类构造函数，并传入 this指针。

// 2. 借用构造函数
function Parent(name) {
    this.name = name
    this.likeFood = ["水果", "鸡", "烤肉"]
}
function Child(name) {
    Parent.call(this, name)
}
Parent.prototype.getName = function() {
    return this.name
}
var chongqingChild = new Child('重庆孩子')
var guangdongChild = new Child('广东孩子')
chongqingChild.likeFood.push('花椒')

console.log(chongqingChild.likeFood)    //  ["水果", "鸡", "烤肉", "花椒"]
console.log(guangdongChild.likeFood)    //  ["水果", "鸡", "烤肉"]
console.log(chongqingChild.name)        //  "重庆孩子"
console.log(chongqingChild.getName())   //  Uncaught TypeError: chongqingChild.getName is not a function
复制代码

值得庆幸的是，这次只有我们 重庆孩子 喜欢吃花椒， 广东孩子 没被标记爱吃花椒啦。并且，我们通过 call 方法将我们的参数也传入到了父类，解决了之前的遗留问题啦。

但是， 原型链继承 是可以调用父类方法的，但是 借用构造函数 却不可以了，这是因为 当前子类的原型链并不指向父类了。因此，结合 第一，第二种继承方式，第三种继承方式应运而生啦。

3. 组合继承

核心：前两者结合，进化更高级。

function Parent(name) {
    this.name = name
    this.likeFood = ["水果", "鸡", "烤肉"]
}
function Child(name, age) {
    Parent.call(this, name)
    this.age = age
}
Parent.prototype.getName = function() {
    return this.name
}
Child.prototype = new Parent()
Child.prototype.constructor = Child
Child.prototype.getAge = function() {
    return this.age
}

var chongqingChild = new Child('重庆孩子', 18)
var guangdongChild = new Child('广东孩子', 19)
chongqingChild.likeFood.push('花椒')

console.log(chongqingChild.likeFood)    // ["水果", "鸡", "烤肉", "花椒"]
console.log(guangdongChild.likeFood)    // ["水果", "鸡", "烤肉"]
console.log(chongqingChild.name)        // "重庆孩子"
console.log(chongqingChild.getName())   // "重庆孩子"
console.log(chongqingChild.getAge())    // 18
复制代码

这样：

1. 原型引用类型传参共享问题
2. 传参问题
3. 调用父类问题都解决啦。

• 三个问题都解决了，开心~这就是Javascript 的经典继承。

• 但是有一个小缺点：在给 Child 原型赋值会执行一次Parent构造函数。所以，无论什么情况下都会调用两次父类构造函数

• 但是，可能很多人会迷惑 Child.prototype.constructor=Child ，这句代码干了什么，这个就需要知道原型，原型链，构造函数之间的关系，我会下次写篇文章~

4. 原型式继承

这是在2006年一个叫 道格拉斯·克罗克福德 的人，介绍的一种方法， 这种方法并没有使用严格意义上的构造函数 。

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

之前我有朋友没理解，我这里就对比的解释上面这两句话。

这之前的三种继承方式，我们都需要自己写自定义函数(例如，Parent和Child)。假如，现在已经有一个对象了，并且，我也只是想用你的属性，不想搞得那么麻烦的自定义很多函数。那怎么办呢？

核心： 我们需要创建一个临时的构造函数，并将作为父类的对象作为构造函数的原型，并返回一个新对象。

/*
    @function 实现继承 函数
    @param parent 充当父类的对象
*/
function realizeInheritance(parent) {
    // 临时函数
    function tempFunc() {}
    tempFunc.prototype = parent
    return new tempFunc()
}
复制代码

核心点说了，我们来尝试一下。

// 这个就是已有的对象
var baba = {
    name: "爸爸",
    likeFoods: ["水果", "鸡", "烤肉"]
}
/*
    var newChild = {} <==> baba  这两个对象建立关系就是这种继承的核心了。
*/
var child1 = realizeInheritance(baba)
var child2 = realizeInheritance(baba)
child1.likeFoods.push('花椒')
console.log(child1.likeFoods) //    ["水果", "鸡", "烤肉", "花椒"]
console.log(child2.likeFoods) //    ["水果", "鸡", "烤肉", "花椒"]
复制代码

我们可以发现，父类的属性对于子类来说都是共享的。所以，如果我们只是想一个对象和另一个对象保持一致，这将是不二之选。

当然，在 ES5 中，新增了个 Object.create(parentObject) 函数来更加便捷的实现上述继承

var baba = {
    name: "爸爸",
    likeFoods: ["水果", "鸡", "烤肉"]
}
var child1 = Object.create(baba)
var child2 = Object.create(baba)
child1.likeFoods.push('花椒')
console.log(child1.likeFoods) //    ["水果", "鸡", "烤肉", "花椒"]
console.log(child2.likeFoods) //    ["水果", "鸡", "烤肉", "花椒"]
复制代码

效果和上面相同~

5. 寄生式继承

这种继承是基于 原型式继承 ，是同一个人想出来的，作者觉得，这样不能有子类的特有方法，似乎不妥。就用来一个种工厂模式的方式来给予子类一些独特的属性。

例如

function realizeInheritance(parent) {
    // 临时函数
    function tempFunc() {}
    tempFunc.prototype = parent
    return new tempFunc()
}
// Parasitic: 寄生的    inheritance： 继承    一个最简单的工厂函数。
function parasiticInheritance(object) {
    var clone = realizeInheritance(object)  // 这是用了原型式继承，但是只要是任何可以返回对象的方法都可以。
    clone.sayName = function() {
        console.log('我是'+this.name)
    }
    return clone
}
var baba = {
    name: "爸爸",
    likeFoods: ["水果", "鸡", "烤肉"]
}
var child = parasiticInheritance(baba)
child.name = '儿子'
child.sayName() // 我是儿子
复制代码

缺点：使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率（每一个函数都是新的）；这一点与构造函数继承类似。

6.寄生组合式继承

我们先回顾之前的 组合继承

function Parent(name) {
    this.name = name
    this.likeFood = ["水果", "鸡", "烤肉"]
}
function Child(name, age) {
    Parent.call(this, name)         // 第二次调用
    this.age = age
}
Parent.prototype.getName = function() {
    return this.name
}
Child.prototype = new Parent()      // 第一次调用
Child.prototype.constructor = Child
Child.prototype.getAge = function() {
    return this.age
}
复制代码

这个两次调用的问题之前有提及过。过程大致：

• 第一次调用，Child 的原型被赋值了 name 和 likeFood 属性
• 第二次调用，注入this，会在Child 的实例对象上注入 name 和 likeFood 属性，这样就屏蔽了原型上的属性。

只要了问题，我们就来解决这个问题~

function Parent(name) {
    this.name = name
    this.likeFood = ["水果", "鸡", "烤肉"]
}
function Child(name, age) {
    Parent.call(this, name)
    this.age = age
}
Parent.prototype.getName = function() {
    return this.name
}

// Child.prototype = new Parent()  使用新方法解决
// Child.prototype.constructor = Child
inheritPrototype(Child, Parent)
function inheritPrototype(childFunc, parentFunc) {
    var prototype = realizeInheritance(parentFunc.prototype)   //创建对象,我们继续是用原型式继承的创建
    prototype.constructor = childFunc              //增强对象
    childFunc.prototype = prototype                //指定对象
}
function realizeInheritance(parent) {
    // 临时函数
    function tempFunc() {}
    tempFunc.prototype = parent
    return new tempFunc()
}

Child.prototype.getAge = function() {
    return this.age
}

var chongqingChild = new Child('重庆孩子', 18)
var guangdongChild = new Child('广东孩子', 19)
chongqingChild.likeFood.push('花椒')

console.log(chongqingChild.likeFood)    // ["水果", "鸡", "烤肉", "花椒"]
console.log(guangdongChild.likeFood)    // ["水果", "鸡", "烤肉"]
console.log(chongqingChild.name)        // "重庆孩子"
console.log(chongqingChild.getName())   // "重庆孩子"
console.log(chongqingChild.getAge())    // 18
复制代码

这种方法的核心思想：

• 首先，用一个空对象建立和父类关系。
• 然后，再用这个空对象作为子类的原型对象。

这样，中间的对象就不存在new 构造函数的情况(这个对象本来就没有自定义的函数)，这样就避免了执行构造函数，这就是高效率的体现。并且，在中间对象继承过程中，父类构造器也没有执行。所以，没有在子类原型上绑定属性。

这种继承方式也被开发人员普遍认为是引用类型最理想的继承范式。

7. class，extends

庆幸 ES6 中为我们提供了两个关键字可以很轻松的实现上述的继承方式: class 和 extends

• class 用来声明类，也就是js中充当类的自定义函数

• extends 表示用哪个作为父类来继承

• super 表示父类的构造器函数，可以向内部传参

class Person {
    
    constructor(name, age) {
        console.log('父类构造函数执行。')
        this.name = name
        this.age = age
        this.commonLikeFood = ["水果", "鸡", "烤肉"]
    }
    
    showInfo() {
        console.log('我是' + this.name + ', 我今年' + this.age + '岁了')
    }
    
    showLikeFood() {
        console.log('我是' + this.name + ', 我喜欢吃' + this.commonLikeFood)
    }
}

class Child extends Person{
    constructor(name, age) {
        super(name, age)    // 像父类中传参，要写在第一行
        console.log('子类构造函数执行。')
    }
}

let child1 = new Child('小明', 27)
let child2 = new Child('小红', 28)

child1.showInfo()   // 我是小明, 我今年27岁了
child1.commonLikeFood.push('火锅')
child1.showLikeFood()   // 我是小明, 我喜欢吃水果,鸡,烤肉,火锅

child2.showInfo()   // 我是小红, 我今年28岁了
child2.showLikeFood()   // 我是小红, 我喜欢吃水果,鸡,烤肉
复制代码

这样我们很轻松的实现了继承关系，也更加符合我们对类的定义，特别是和后端吻合度更高~

总结：

• 模式(简述)：
  • 工厂模式：创建中间对象，给中间对象赋添加属性和方法，再返回出去。
  • 构造函数模式：就是自定义函数，并用过 new 关键子创建实例对象。缺点也就是无法复用。
  • 原型模式： 使用 prototype 来规定哪一些属性和变量能被共享。
• 继承
  • 原型链继承:
    • 优点：只调用一次父类构造函数，能复用原型链属性
    • 缺点：部分不想共享属性也被共享，无法传参。
  • 构造函数继承：
    • 优点：可以传参，同属性可以不被共享。
    • 缺点：无法使用原型链上的属性
  • 组合继承
    • 优点：可以传参，同属性可以不被共享，能使用原型链上的属性。
    • 缺点：父类构造函数被调用2次，子类原型有冗余属性。
  • 原型式继承：(用于对象与对象之间)
    • 优点：在对象与对象之间无需给每个对象单独创建自定义函数即可实现对象与对象的继承，无需调用构造函数。
    • 缺点：父类属性被完全共享。
  • 寄生式继承：
    • 优点：基于原型式继承仅仅可以为子类单独提供一些功能(属性)，无需调用构造函数。
    • 缺点：父类属性被完全共享。
  • 寄生组合继承：
    • 优点：组合继承+寄生式继承，组合继承缺点在于调用两次父类构造函数，子类原型有冗余属性，寄生式继承的特性规避了这类情况，集寄生式继承和组合继承的优点与一身，是实现基于类型继承的最有效方式。
  • class & extends：
    • 优点：个人认为是十分相似寄生组合继承，几乎可以说是寄生组合继承的语法糖。但还是有一点的区别，就是寄生组合继承是先创建子类实例对象，然后再对其增强；而ES6先将父类实例对象的属性和方法，通过调用super方法，添加到实例对象上，然后再用子类的构造函数,改变this指向。