JavaScript進階系列—原型

• 屬性查找

• 原型屬性

• 性能

• 類型的原型原型模型。

常被當作是 JavaScript 的缺點被提及，其實基於原型的繼承模型比傳統的類別繼承還要強大。 實作傳統的類別繼承模型是很簡單，但是實作 JavaScript 中的原型繼承則是困難的多。 (It is for example fairly trivial to build a classic model on top of it, while the other way around is a far more difficult task.)

• JavaScript 是唯一一個被廣泛使用的基於原型繼承的語言，所以理解兩種繼承模式的差異是需要一定時間的。

不同之處在於 JavaScript 使用原型鏈的繼承方式。

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

上面的範例中，test 物件從 Bar.prototype 和 Foo.prototype 繼承；因此， 它能存取 Foo 的原型方法 method。同時，它也能夠存取那個定義在原型上的 Foo 實例屬性 value。 要注意的是 new Bar() 不會創造出一個新的Foo 實例，而是 重複使用它原型上的那個實例；因此，所有的Bar 實例都會共享相同的 value 屬性。

屬性尋找

一個物件的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止。

到達原型鏈的頂部 - 也就是 Object.prototype - 但是仍然沒有找到指定的屬性，就會回傳 undefined。

注意：不要使用Bar.prototype = Foo，因為這不會執行 Foo 的原型，而是指向函數 Foo。 因此原型鏈將會回溯到Function.prototype 而不是Foo.prototype，因此method 將不會在 Bar 的原型鏈上。

原型屬性

屬性用來創建原型鏈時，可以把任何類型的值賦給它（prototype）。 然而將原子型別賦給 prototype 的操作將會被忽略。

function Foo() {}
Foo.prototype = 1; // 无效

而將物件賦值給 prototype，正如上面的例子所示，將會動態的創建原型鏈。

性能

如果一個屬性在原型鏈的上端，則對於查找時間將帶來不利影響。特別的，試圖取得一個不存在的屬性將會遍歷整個原型鏈。

且，當使用 for in 循環遍歷物件的屬性時，原型鏈上的所有屬性都會被存取。

擴充內建類型的原型一個錯誤特性被經常使用，那就是擴充 Object.prototype 或其他內建類型的原型物件。

這種技術被稱為 monkey patching 並且會破壞封裝。雖然它被廣泛的應用到一些 JavaScript 類別庫中例如 Prototype, 但是我仍然不認為為內建類型添加一些非標準的函數是個好主意。

擴充內建型別的唯一理由是為了和新的 JavaScript 保持一致，例如Array.forEach。

總結

在寫複雜的 JavaScript 應用之前，充分理解原型鏈繼承的工作方式是每個 JavaScript 程式設計師必修的功課。 要提防原型鏈過長帶來的效能問題，並知道如何透過縮短原型鏈來提高效能。 更進一步，絕對不要擴展內建類型的原型，除非是為了和新的 JavaScript 引擎相容。

註：這是程式設計領域常用的一種方式，稱為 Backport，也就是將新的補丁加入舊版本。

以上就是JavaScript進階系列—原型的內容，更多相關內容請關注PHP中文網（www.php.cn）！