首頁 > web前端 > js教程 > Javascript 學習筆記之 物件篇(二) : 原型物件_基礎知識

Javascript 學習筆記之 物件篇(二) : 原型物件_基礎知識

WBOY
發布: 2016-05-16 16:43:09
原創
1247 人瀏覽過

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 的建構子為本身,並新建一個 Bar 物件實例:

Bar.prototype.constructor = Bar;
var test = new Bar();
登入後複製

下面我們來看下整個原型鏈的組成:

test [instance of Bar]
 Bar.prototype [instance of Foo]
 { foo: 'Hello World' }
 Foo.prototype
  { method: ... }
  Object.prototype
  { toString: ... /* etc. */ }
登入後複製

在上面的範例中,物件 test 將會同時繼承 Bar.prototype 和 Foo.prototype。因此它可以存取定義在 Foo 中的函數 method。當然,它也可以存取屬性 value。需要提到的是,當 new Bar() 時並不會建立一個新的 Foo 實例,而是重複使用它原型物件自帶的 Foo 實例。同樣,所有的 Bar 實例都共享同一個 value 屬性。我們舉例說明:

test1 = new Bar();
 test2 = new Bar();
 Bar.prototype.value = 41;
 test1.value //41
 test2.value//41
登入後複製

原型鏈查找機制

當存取一個物件的屬性時,Javascript 會從物件本身開始往上遍歷整個原型鏈,直到找到對應屬性為止。如果此時到達了原型鏈的頂部,也就是上例中的 Object.prototype,仍然未發現需要尋找的屬性,那麼 Javascript 就會傳回 undefined 值。

原型物件的屬性

儘管原型物件的屬性被 Javascript 用來建立原型鏈,我們仍然可以值賦給它。但是原始值複製給 prototype 是無效的,如:

function Foo() {}
Foo.prototype = 1; // no effect
登入後複製

這裡講個本篇的題外話,介紹下什麼是原始值:
在 Javascript 中,變數可以存放兩種類型的值,分別是原始值和參考值。

1.原始值(primitive value):

原始值是固定而簡單的值,是存放在堆疊 stack 中的簡單資料段,也就是說,它們的值直接儲存在變數存取的位置。
原始型別有以下五種型: Undefined, Null, Boolean, Number, String。

2.引用值(reference value):

引用值則是比較大的對象,存放在堆 heap 中的對象,也就是說,儲存在變數處的值是一個指針  pointer,指向儲存對象的記憶體。所有引用類型都整合自 Object。
原型鏈效能問題

如果需要尋找的屬性位於原型鏈的上端,那麼查找過程對於效能而言無疑會帶來負面影響。當在性能要求必要嚴格的場景中這將是需要重點考慮得因素。此外,試圖尋找一個不存在屬性時將會遍歷整個原型鏈。
同樣,當遍歷一個物件的屬性時,所有在原型鏈上的屬性都將被存取。

總結

理解原型式繼承是寫較為複雜的 Javascript 程式碼的前提,同時要注意程式碼中原型鏈的高度。當面臨效能瓶頸時要學會將原型鏈分開開來。此外,要將原型物件 prototype 和原型 __proto__ 區分開來,這裡主要討論原型物件 prototype 就不闡述關於原型 __proto__ 的問題了,

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板