JS中的继承 | 余韵之

什么是继承？继承就是子类拥有父类的各种属性和方法
什么是类？这里的JS的类即是函数，能产生对象的东西就是类
继承需要两个类：父类和子类，在JS中的继承需要有2次对原型的搜索。
如何让子类拥有父类的属性和方法？

//原理
子类('参数'){
    父类.call(this,'参数')
}
子类.prototype.__proto__=父类.prototype

好了，现在开始说明举例。

分为ES5和ES6的写法以及两者的区别。

一、ES5中如何完成JS的继承？

1、声明一个父类函数，父类函数有一个name的属性和run()的方法

function Human(name){
     this.name = name
 }
Human.prototype.run = function(){
     console.log("我叫"+this.name+"，我在跑")
     return undefined
 }

2、声明一个子类函数，并从父类函数中继承属性

function Man(name){
     Human.call(this, name) //是Human的属性
     this.gender = '男' //是自己的属性
 }
Man.prototype.fight = function(){
     console.log('xxx')
}

注意，Human.call(this, name)就是从父类继承属性，这句代码很重要

3、从父类函数继承方法

//添加一句这样的代码就可以了
Man.prototype.__proto__=Human.prototype

然而IE不兼容这个代码所以要换另一种方式

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

原因是什么？因为当 var a =new f()的时候

会发生5个步骤：产生一个空对象 this=空对象 this._proto__=f.prototype 执行f.call(this,其他参数) return 上一行述结果所以需要声明一个空的函数f。

二、ES6中如何完成JS的继承？

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

从ES5改成ES6逻辑其实是一样的，只是写法换了一下。其中用关键字extends来继承父类，用super来call一下父类获得父类的属性。

三、ES5与ES6写法的优劣？

ES5的写法可以更直观的看清楚内存的变化，同时可以在方法中增加属性。而ES6的写法不能在方法中增加属性，暂时不支持。