继承的写法

继承是什么？

现实生活中，继承是什么，大家应该都懂，不用多说。

那在 JavaScript 中，简单来说，就是一个对象拥有另一个对象的属性和方法。

怎么实现继承？

1. ES5实现继承（基于原型链）：

function Human(name) {    // 创建一个 Human 构造函数
  this.name = name
}
Human.prototype.run = function () {  
  console.log('I can run')
}

function Man(name) {    // 创建一个 Man 构造函数
  Human.call(this, name)
  this.gender = '男'
}
Man.prototype.fight = function () {
  console.log('I can fight')
}

Man.prototype.__proto__ = Human.prototype    // 让 Man 的原型对象的 proto 指向 Human 的原型对象

以上代码，就可以实现继承。可以new Man(name)来生成一个带继承的实例

但是 IE 不支持这样的写法，在 IE 中，你要把

Man.prototype.__proto__ = Human.prototype

换成

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

至此，就实现了继承，Man 有了 Human 的 属性和方法。

那么上面的 new 又做了什么

(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象；
(3) 将这个空对象的proto指向了构造函数对象的prototype；
(4) 执行构造函数中的代码（为这个新对象添加属性） ；
(5) 返回新对象。

2. ES6 实现继承（class 和 extends）：

ES6 引入的「类」是一个特殊的函数，它可以帮助我们进一步简化继承的操作，但它依旧是「基于原型」的而不是引入新的面向对象继承模型，类语法只不过是一种语法糖。

class Human {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log('I can run')
  }
}

class Man extends Human {
  constructor(name) {
    super(name)
    this.gender = '男'
  }
  fight(){
    console.log('I can fight')
  }
}

可以看到 ES6 的写法比 ES5 的写法简洁了很多。
但是有个问题就是，它明明是个函数，但却不能被调用。

typeof Man     // "function"
Man ()      // Uncaught TypeError: Class constructor Man cannot be invoked without 'new'