title: JavaScript模擬繼承
date: 2018-11-01 23:05:39
tags: [JavaScript]
categories: JavaScript

前言

繼承是面向?qū)ο笏枷胫械闹匾拍睿?JavaScript 在ES 6 中正式引入了繼承的概念。
下面介紹一下繼承的概念，以及在 ES5 和 ES6 中寫(xiě)繼承的方法。

面向?qū)ο笾械睦^承

維基百科：

繼承（ inheritance）是面向?qū)ο筌浖夹g(shù)當(dāng)中的一個(gè)概念。如果一個(gè)類別B“繼承自”另一個(gè)類別A，就把這個(gè)B稱為“A的子類”，而把A稱為“B的父類別”也可以稱“A是B的超類”。繼承可以使得子類具有父類別的各種屬性和方法，而不需要再次編寫(xiě)相同的代碼。

所以繼承是類和類之間的關(guān)系，然而JavaScript起初根本沒(méi)有類的概念，那么為什么也有繼承呢？

JavaScript中的繼承

要了解JS的繼承，就得先了解原型鏈。該部分可見(jiàn)我的另一篇博客

簡(jiǎn)單來(lái)說(shuō)，就是每一個(gè)對(duì)象都有一個(gè)__proto__屬性，指向該對(duì)象的原型prototype，原型的層層指向就形成了一個(gè)類似鏈表的結(jié)構(gòu)（實(shí)際上原型的指向是多對(duì)一的，所以說(shuō)成“樹(shù)”的結(jié)構(gòu)其實(shí)更準(zhǔn)確一點(diǎn)）稱之為原型鏈。

JavaScript中的繼承就是基于原型鏈實(shí)現(xiàn)的。
JS里面沒(méi)有類，只有函數(shù)，所以我們稱呼：子類函數(shù)、父類函數(shù)（比如 Array 與 Object 的關(guān)系）
可以這么解釋繼承：子類函數(shù)構(gòu)造出來(lái)的對(duì)象直接擁有父類的屬性。

那么類到底是什么：能產(chǎn)生對(duì)象的東西即為類。
下面的例子中，Human 就可以稱為類。person 是一個(gè)有自己屬性的對(duì)象。

function Human(name){
    this.name = name
}
Human.prototype.run = function(){
    ......
}

var person = new Human('Allen')

知道了什么是類，下面就來(lái)寫(xiě)繼承。
假設(shè)我們想讓Man類繼承Human類。Man 有自己的屬性和方法，同時(shí)也繼承了 Human 的屬性和方法。

ES5寫(xiě)法

function Human(name){
     this.name = name   // 自身的屬性 
 }
Human.prototype.run = function(){   // 在原型上添加屬性或方法
    console.log("我叫"+this.name+"，我在跑")
    return undefined
}

function Man(name){
    Human.call(this, name)  // 使得Man類有了Human類自身的 name 屬性，即對(duì)象本身屬性的添加 
    this.gender = '男'
}

// 要繼承Human原型上的屬性和方法，最簡(jiǎn)單的方式是：
// Man.prototype.__proto__ = Human.prototype
// 但是這不符合 ECMA 標(biāo)準(zhǔn)，因此要寫(xiě)下面三行
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

Man.prototype.fight = function(){  // Man類原型上自身的方法
    console.log('糊你熊臉')
}

執(zhí)行var person = new Man('Allen')
person的原型鏈：

person.__proto__ === Man.prototype
person.__proto__.__proto__ === Human.prototype
person.__proto__.__proto__.__proto__ === Object.prototype
person.__proto__.__proto__.__proto__.__proto__ === null

ES6寫(xiě)法

class是ES6新增的一個(gè)語(yǔ)法糖，實(shí)際上它的類型仍然是一個(gè)函數(shù)。

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

// 使用extends關(guān)鍵字來(lái)繼承
class Man extends Human{  // 等價(jià)于 Man.prototype.__proto__ = Human.prototype
    constructor(name){
        super(name)  // 等價(jià)于 Human.call(this,name)
        this.gender = '男'
    }
    fight(){
        console.log('糊你熊臉')
    }
}

ES6寫(xiě)法的缺點(diǎn)

ES6寫(xiě)法確實(shí)很簡(jiǎn)潔，但是如果我們想在類的原型上寫(xiě)一個(gè)不是函數(shù)的屬性，這代碼就有點(diǎn)奇怪了：

class Human{
    constructor(name){
        this.name = name
    }
    get kind(){
        return '人類'
    }
    run(){
        console.log("我叫"+this.name+"，我在跑")
        return undefined
    }
}

而用ES5的寫(xiě)法就很好理解：

function Human(name){
   this.name = name
}
Human.prototype.kind = '人類'