原型 和原型鏈

什麽是原型鏈

簡單理解就是原型組成的鏈，對象的__proto__它的是原型，而原型也是一個對象，也有__proto__屬性，原型的__proto__又是原型的原型，就這樣可以一直通過__proto__想上找，這就是原型鏈，當向上找找到Object的原型的時候，這條原型鏈就算到頭了。

原型與原型鏈的幾個要點

• 每一個函數都有一個prototype屬性 和 一個 __proto__屬性。
• 每一個對象都有一個__proto__屬性 。
• （除null）所有的對象都是由構造函數創建的。
• 對象的__proto__ === 該對象的構造函數的prototype （ [].__proto__ === Array.prototype）
• 對象的__proto__ 也是一個對象，所以對象的__proto__的__proto__ === Object.prototype
• null位於原型鏈最頂層
• Function.__proto__ === Function.prototype。 這是一個先有蛋還是先有雞的問題
• null 沒有__proto__ 和 prototype

• 所有原型鏈屬性傳遞方向 （某個屬性在本對象中找不到時候，會到原型鏈上去找）： 先找對象 本身屬性 =》構造函數的prototype中屬性 =》Object.prototype中的屬性=》null （結束）

  例子：

function Person(){
    this.name = name;
    this.age = age;
}
Person.prototype.talk = function(){
    console.log("hello");
}
let ming = new Person("ming",24);//ming === {name:"ming",age:24}
ming.talk(); // ming中沒有talk這個屬性，就會通過__proto__到到原型鏈中去找，ming.__proto__ ===  Person.prototype。
//由於ming.__proto__也就是 Person.prototype 也是一個對象，所以  ming.__proto__.__proto__ ===  Object.prototype。（如果ming.__proto__中沒有找到talk屬性會繼續向上找ming.__proto__.__proto__ ，直到找到最頂層null）
 

原型鏈的應用

通過一個構造函數創建出來的多個實例，如果都要添加一個方法，給每個實例去添加並不是一個明智的選擇。這時就該用上原型了。

在實例的原型上添加一個方法，這個原型的所有實例便都有了這個方法。
例子：給所有的function 添加一個 before屬性 和 after屬性

Function.prototype.before = function(beforeFn){
    let functionObj = this;
    return function (){
        beforeFn.apply(this,arguments);
        functionObj.apply(this,arguments);
    }
}
Function.prototype.after = function(afterFn){
    let functionObj = this;
    return function (){
        functionObj.apply(this,arguments);
        afterFn();
    }
}
function test(){
    console.log('this is a test function!');
}
let test1 = test.before(function(){
    console.log(arguments);
    console.log('before');
}).after(()=>{
    console.log('after');
});
test1();
 

一個原型與原型鏈的圖解

javascript 原型與原型鏈淺析