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進階系列—原型的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！