JS之继承

之前写过一篇JS中原型与原型链相关：https://www.jianshu.com/p/ec0c063980ee
本文将再深入说明关于JS继承的实现

1. 使用 prototype 的继承

function Human(name){
  this.name = name
}
Human.prototype.run = function(){
  console.log('我叫'+this.name+'，我在跑')
  return undefined
}
function Man(name){
  Human.call(this,name)
  this.gender = 'Male'
}

Man.prototype.__proto__ = Human.prototype
//以上这句相当于下边的三句，上句在IE不可用，其他时候也尽量不使用
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

Man.prototype.fight = function(){
   console.log('打架')
}

执行以上代码后，new一个Man类型对象，可以看到其中生成的原型链：

2019-10-07_224910.jpg

new在其中做了什么

var obj = new Fn()

1. 产生一个空对象
2. this = 空对象
3. this._proto_ = Fn.prototype
4. 执行Fn.call(this,x,y,...)
5. return this

2. 使用 ES6 class 语法糖的继承

class Human{
  constructor(name){
    this.name = name
  }
  run(){
    console.log('我叫'+this.name+'，我在跑')
    return undefined         
  }
}
class Man extends Human{
  constructor(name){
    super(name)
    this.gender = 'male'
  }
  fight(){
    console.log('打架')
  }
}

同样的，new一个Man类型对象：

2019-10-07_225554.jpg

与之前的显示有差异，多出了constructor。通过class创建类(实质是函数)，原型链的constructor指向函数本身，所以constructor里写的就是函数体内容。
class语法糖可以很方便的实现继承，但不利于对原型链本身的理解。