如何完全弄懂原型

帶你完全瞭解原型

官方解釋：對於使用過基於類的語言 (如 Java 或 C++) 的開發人員來講，JavaScript 有點使人困惑，由於它是動態的，而且自己不提供一個 class 實現。（在 ES2015/ES6 中引入了 class 關鍵字，但那只是語法糖，JavaScript 仍然是基於原型的）。

當談到繼承時，JavaScript 只有一種結構：對象。每一個實例對象（ object ）都有一個私有屬性（稱之爲 proto）指向它的構造函數的原型對象（prototype ）。該原型對象也有一個本身的原型對象( proto) ，層層向上直到一個對象的原型對象爲 null。根據定義，null 沒有原型，並做爲這個原型鏈中的最後一個環節。

幾乎全部 JavaScript 中的對象都是位於原型鏈頂端的 Object 的實例。

儘管這種原型繼承一般被認爲是 JavaScript 的弱點之一，可是原型繼承模型自己實際上比經典模型更強大。例如，在原型模型的基礎上構建經典模型至關簡單。

JavaScript 對象是動態的屬性「包」（指其本身的屬性）。JavaScript 對象有一個指向一個原型對象的鏈。當試圖訪問一個對象的屬性時，它不單單在該對象上搜尋，還會搜尋該對象的原型，以及該對象的原型的原型，依次層層向上搜索，直到找到一個名字匹配的屬性或到達原型鏈的末尾。

函數類型

• 普通函數
• 構造函數（類：內置類和本身建立的類）

對象類型

• 普通對象
• Math
• JSON ...
• 類的實例（數組，正則，日期...)
• prototype 或者 proto
• arguments 或者元素集合等類數組
• 函數也是一種對象
• 萬物皆對象 ....

瞭解原型的三句話

• 每個函數（類） 都有一個Prototype（原型屬性），屬性值是一個對象，這個對象存儲類當前類供實例調取的公有屬性和方法
• 在瀏覽器默認的給原型開闢的堆內存中有一個屬性constructor，存儲的是當前類的自己。
• 每個對象（實例）都有一個proto(原型鏈)屬性。這個屬性指向當前實例所屬類的原型（不肯定所屬的類，都指向Object.prototype)

注意 Object是Js中內置的基類（最底層類），在他的原型上proto的值爲null:不爲null也是指向本身。

function Fn(){
    this.x = 100;
    this.y = 200;
    this.getX = function(){
        console.log(this.x);
    }
}
Fn.prototype.getX = function(){
    console.log(this.x);
}
Fn.prototype.getY = function(){
    console.log(this.y);
}
var f1 = new Fn;
var f2 = new Fn;

最重要的一張圖