理解原型鏈

JavaScript之原型鏈

參考：http://zhangjiahao8961.iteye.com/blog/2070650

原型鏈

概念

原型鏈是一種機制，指的是JavaScript每一個對象包括原型對象都有一個內置的[[proto]]屬性指向建立它的函數對象的原型對象，即prototype屬性。

做用

原型鏈的存在，主要是爲了實現對象的繼承。

理解

要理解原型鏈，須要從幾個概念入手。

一、函數對象

在JavaScript中，函數即對象。

二、原型對象

當定義一個函數對象的時候，會包含一個預約義的屬性，叫prototype，這就屬性稱之爲原型對象。

//函數對象
function F(){};
console.log(F.prototype)

//普通對象
var a = {};
console.log(a.prototype);//undefined

三、__proto__

JavaScript在建立對象的時候，都會有一個[[proto]]的內置屬性，用於指向建立它的函數對象的prototype。原型對象也有[[proto]]屬性。所以在不斷的指向中，造成了原型鏈。

舉個例子來講，咱們將對象F的原型對象修改一下，就能夠清楚看到上述的關係

//函數對象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

四、new

當使用new去調用構造函數時，至關於執行了

var o = {};
o.__proto__ = F.prototype;
F.call(o);

所以，在原型鏈的實現上，new起到了很關鍵的做用。

五、constructor

原型對象prototype上都有個預約義的constructor屬性，用來引用它的函數對象。這是一種循環引用。

function F(){};
F.prototype.constructor === F;

在實際運用中，常常會有下列的寫法

function F(){};
F.prototype = {
    constructor : F,
    doSomething : function(){}
}

這裏要加constructor是由於重寫了原型對象，constructor屬性就消失了，須要本身手動補上。

六、原型鏈的內存結構

function F(){
    this.name = 'zhang';
};
var f1 = new F();
var f2 = new F();

爲了嚴謹起見，區分對象和變量