JS中的继承

前记

在维基百科中继承的含义是使子类别具有父类别的属性和方法，或者说子类构造的对象直接拥有父类对象的属性。

但是在JavaScript中并没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，JavaScript的继承是靠prototype（原型链）来实现的。

prototype继承实现

我曾写过一篇名为原型和原型链的文章，那时候说明了原型和原型链是什么，那继承只要在它的原型链中添加公有属性就可以了

假如我们写一个构造函数Human

function Human(name){
  this.name = name//构造函数可以生成新对象，this就是这个新对象
}

然后在Human的原型链上添加函数run

Human.prototype.run = function (){
  console.log(this.name + '在跑')
  return undefined
}

这样当我们用Human构造一个对象时候

let a = new Human('lgm')
//Human {name: "lgm"}
//  name: "lgm"/
//  __proto__:
//    run: ƒ ()
//    constructor: ƒ Human(name)
//     __proto__: Object

现在我们再写一个构造函数Man

function Man(name){
  this.name = name//this新生成的对象
  this.gender: '男'//this新生成的对象
}

然后在Man的原型链上添加函数fight

Man.prototype.fight = function (){
  console.log(this.name + '会打架')
}

这样用Man构造一个对象就是

let b = new Man('lgm')
//Man {name: "lgm"}
//  name: "lgm"/
//  gender: '男'
//  __proto__:
//    fight: ƒ ()
//    constructor: ƒ Man(name)
//      __proto__: Object

当我们想要Man继承Human的属性的时候，就可以知道，只要

Man.prototype.__proto__ = Human.prototype

修改Man

function Man(name){
  Human.call(this, name)
  this.gender: '男'//this新生成的对象
}

就可以完成继承了，让我们来试一下
再次构造一个Man对象

let lgm = new Man('lgm')
//Man {name: "lgm", gender: "男"}
//  gender: "男"
//  name: "lgm"/
//  __proto__: Human
//    fight: ƒ ()
//    constructor: ƒ Man(name)
//    __proto__:
//      run: ƒ ()
//      constructor: ƒ Human(name)
//      __proto__: Object

由此我们可以看到，Man继承了Human中的run()函数，但是有一个问题
直接操作__proto__是不属于ECMA规范的，在IE中直接操作并不可行，我们需要换一种写法

var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

这样是使用了new的特性，让我们来试一下，然后再次构造一个Man对象

let lgm = new Man('lgm')
//Man {name: "lgm", gender: "男"}
//  gender: "男"
//  name: "lgm"/
//  __proto__: Human
//    fight: ƒ ()
//    __proto__:
//      run: ƒ ()
//      constructor: ƒ Human(name)
//      __proto__: Object

可以看到，效果是一样的

class语法糖

在ES6语法中，新增了一个叫做class的语法，专门用来实现继承，上面代码通过class改写如下

class Human {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log("我叫" + this.name + "，我在跑")
    return undefined
  }
}
class Man extends Human {//Man.prototype.__proto__ = Human.prototype
  constructor(name) {
    super(name)//Human.call(this, name)
    this.gender = '男'
  }
  fight() {
    console.log(this.name + '会打架')
  }
}

两种方法的优劣

prototype继承写法麻烦，但是简单易懂，而class继承的写法虽然简单，但难以理解

并且，原型链继承添加继承属性的话会会非常简单，只需

Human.prototype.headNumber = '1'

而class继承如果需要添加继承属性会非常麻烦