js原型鏈

NervosNetwork 發(fā)布于2019-08-22 17:59 / 2112人閱讀

摘要：構(gòu)造函數(shù)，實(shí)例，原型三者的關(guān)系如下圖構(gòu)造函數(shù)是構(gòu)成整個(gè)原型鏈的關(guān)鍵，是他利用將原型傳給了后代。因此，通過(guò)操縱構(gòu)造函數(shù)的，就能夠操縱原型鏈，從而對(duì)原型鏈進(jìn)行自在的拼接。

要理解js的原型鏈主要就是理清楚以下三者的關(guān)系：

構(gòu)造函數(shù)的protitype屬性
對(duì)象的__proto__屬性
對(duì)象的constructor屬性

在js中，函數(shù)作為一等公民，它是一個(gè)對(duì)象，可以擁有自己的屬性，可以像其他類型（比如string）一樣作為參數(shù)進(jìn)行傳遞，作為返回值進(jìn)行返回。

我們首先寫一個(gè)名為Animal的函數(shù)。我們將從這個(gè)Animal函數(shù)開(kāi)始，通過(guò)原型鏈，構(gòu)建一條“動(dòng)物-狗-警犬”的繼承關(guān)系。

 function Animal() {}

首先把目光放在這個(gè)Animal函數(shù)身上。這是一個(gè)普通的空函數(shù)，當(dāng)函數(shù)被關(guān)鍵字new調(diào)用時(shí)，我們就說(shuō)他此刻是作為一個(gè)構(gòu)造函數(shù)，通常用首字母大寫表示。
接下來(lái)實(shí)例化這個(gè)Animal類

var animal = new Animal();

這時(shí)，js發(fā)生了以下過(guò)程：

從內(nèi)存中獲取一個(gè)空對(duì)象{}交給animal。

設(shè)置animal.__proto__為Animal.prototype

執(zhí)行構(gòu)造函數(shù)中的其他操作，比如利用this設(shè)置animal的屬性等，因?yàn)榇藭r(shí)this指向的是animal。我們這里是空函數(shù),因此沒(méi)有操作。

打印animal到控制臺(tái)。

可以看到animal只有一個(gè)__proto__屬性，并且在__proto__中還有一個(gè)__proto__屬性，這就是一條原型鏈，由__proto__組成的原型鏈。

當(dāng)在自身屬性上沒(méi)有查找到某個(gè)屬性時(shí)，js就會(huì)嘗試查找__proto__上有無(wú)該屬性，不斷的向著上級(jí)__proto__爬，一直到找到那個(gè)屬性為止，或者沒(méi)有找到，返回undefined。

animal的第二級(jí)__proto__指向的就是Object。因?yàn)樗械膶?duì)象的原型鏈頂端都是Object。

在_propto_屬性中我們還能看到constructor屬性，該屬性指向一個(gè)構(gòu)造函數(shù)。他們之間的關(guān)系即是：構(gòu)造函數(shù)的prototype屬性指向了原型，而原型上的constructor又回指構(gòu)造函數(shù)Animal。

構(gòu)造函數(shù)，實(shí)例，原型三者的關(guān)系如下圖：

構(gòu)造函數(shù)Animal是構(gòu)成整個(gè)原型鏈的關(guān)鍵，是他利用prototype將原型傳給了后代。因此，通過(guò)操縱構(gòu)造函數(shù)的prototype，就能夠操縱原型鏈，從而對(duì)原型鏈進(jìn)行自在的拼接。

現(xiàn)在我們就開(kāi)始打造Animal->Dog->PoliceDog的原型鏈。

 Animal.prototype.breathe = function() {
    console.log("breathe~");
}
 function Dog(name){
    this.name = name;
}

 function PoliceDog(name,id) {
    Dog.call(this, name);
    this.id = id;
}

我們?cè)贏nimal的prototype上設(shè)置了一個(gè)breathe方法，之后又新建了Dog和PoliceDog這兩個(gè)構(gòu)造函數(shù)，在構(gòu)造函數(shù)中利用call和this設(shè)置了一些自己獨(dú)有的屬性。

現(xiàn)在, Animal,Dog,PoliceDog彼此還沒(méi)有交集。當(dāng)然他們的頂級(jí)原型都是Object。

Dog.prototype = new Animal();
PoliceDog.prototype = new Dog();

上兩句代碼就將三者的原型攛在了一起。接下來(lái)還需要將原型上的constructor進(jìn)行回指。

Dog.prototype.constructor = Dog;
PoliceDog.Prototype.constructor = PoliceDog;

下面繼續(xù)為Dog和PoliceDog添加一些方法

Dog.prototype.constructor = Dog;
Dog.prototype.bark = function(){
     console.log("汪！汪！");
}
PoliceDog.prototype.manhunt = function() {
     console.log(this.name + "向犯罪份子瘋狂發(fā)動(dòng)進(jìn)攻！")
}
PoliceDog.prototype.checkId = function() {
     console.log("警犬"+this.name +"的id是："+this.id);
}

此時(shí)我們new一個(gè)PoliceDog,并將其打印至控制臺(tái)。
可以清晰的看到這條原型鏈。

但是我們也注意到在policeDog的第二級(jí)原型上繼承了name屬性，但該屬性我們已經(jīng)在構(gòu)造函數(shù)中為自己設(shè)置了，我們不希望在原型上也繼承該屬性。

會(huì)出現(xiàn)這種情況的原因是因?yàn)槲覀冊(cè)谄唇釉蜁r(shí)用的是new出來(lái)的一個(gè)實(shí)例。Dog的實(shí)例中存在name屬性。

因此可以采用另一種拼接方法。
PoliceDog.prototype = Object.create(Dog.prototype);

Object.create函數(shù)接受一個(gè)對(duì)象A，并返回一個(gè)對(duì)象，返回的對(duì)象的__proto__為對(duì)象A。
形如這個(gè)樣子：Object.create(對(duì)象A)，返回{__proto__:對(duì)象A}
關(guān)于Object.create具體的請(qǐng)移步這里。

修改之后再次打印policeDog的實(shí)例

可以看到name屬性沒(méi)有出現(xiàn)在原型里。

使用es6實(shí)現(xiàn)繼承，底層也是使用原型鏈

class Animal {
    breathe() {
        console.log("breathe")
   };
}
class Dog extends Animal {
    constructor(name){
        super();
        this.name = name;
    }
    bark(){
        console.log("汪！汪！");
    }
}
class PoliceDog extends Dog {
    constructor(name,id){
        super(name);
        this.id = id;
    }
    manhunt(){
        console.log(this.name + "向犯罪份子瘋狂發(fā)動(dòng)進(jìn)攻！");
    }
    checkId(){
        console.log("警犬"+this.name +"的id是："+this.id);
    }
}

// 測(cè)試
let policeDog_1 = new PoliceDog("peter","k0302");
console.log(policeDog_1);

與我們使用Object.create修改原型鏈達(dá)到一樣的效果