Javascript 學(xué)習(xí)筆記之 對象篇(二) : 原型對象
Javascript 是唯一一個被廣泛運用的原型式繼承的語言,所以理解兩種繼承方式的差異是需要時間的。
第一個主要差異就是 Javascript 使用原型鏈來繼承:
function Foo() {
this.value = 42;
}
Foo.prototype = {
method: function() {}
};
function Bar() {}
設(shè)置 Bar 的 prototype 為 Foo 的對象實例:
Bar.prototype = new Foo(); Bar.prototype.foo = 'Hello World';
確保 Bar 的構(gòu)造函數(shù)為本身,并新建一個 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 中的函數(shù) method。當(dāng)然,它也可以訪問屬性 value。需要提到的是,當(dāng) new Bar() 時并不會創(chuàng)建一個新的 Foo 實例,而是重用它原型對象自帶的 Foo 實例。同樣,所有的 Bar 實例都共享同一個 value 屬性。我們舉例說明:
test1 = new Bar(); test2 = new Bar(); Bar.prototype.value = 41; test1.value //41 test2.value//41
原型鏈查找機制
當(dāng)訪問一個對象的屬性時,Javascript 會從對象本身開始往上遍歷整個原型鏈,直到找到對應(yīng)屬性為止。如果此時到達(dá)了原型鏈的頂部,也就是上例中的 Object.prototype,仍然未發(fā)現(xiàn)需要查找的屬性,那么 Javascript 就會返回 undefined 值。
原型對象的屬性
盡管原型對象的屬性被 Javascript 用來構(gòu)建原型鏈,我們?nèi)匀豢梢灾蒂x給它。但是原始值復(fù)制給 prototype 是無效的,如:
function Foo() {}
Foo.prototype = 1; // no effect
這里講個本篇的題外話,介紹下什么是原始值:
在 Javascript 中,變量可以存放兩種類型的值,分別是原始值和引用值。
1.原始值(primitive value):
原始值是固定而簡單的值,是存放在棧 stack 中的簡單數(shù)據(jù)段,也就是說,它們的值直接存儲在變量訪問的位置。
原始類型有以下五種型: Undefined, Null, Boolean, Number, String。
2.引用值(reference value):
引用值則是比較大的對象,存放在堆 heap 中的對象,也就是說,存儲在變量處的值是一個指針 pointer,指向存儲對象的內(nèi)存處。所有引用類型都集成自 Object。
原型鏈性能問題
如果需要查找的屬性位于原型鏈的上端,那么查找過程對于性能而言無疑會帶來負(fù)面影響。當(dāng)在性能要求必要嚴(yán)格的場景中這將是需要重點考慮得因素。此外,試圖查找一個不存在屬性時將會遍歷整個原型鏈。
同樣,當(dāng)遍歷一個對象的屬性時,所有在原型鏈上的屬性都將被訪問。
總結(jié)
理解原型式繼承是寫較為復(fù)雜的 Javascript 代碼的前提,同時要注意代碼中原型鏈的高度。當(dāng)面臨性能瓶頸時要學(xué)會將原型鏈拆分開來。此外,要將原型對象 prototype 和原型 __proto__ 區(qū)分開來,這里主要討論原型對象 prototype 就不闡述關(guān)于原型 __proto__ 的問題了,
相關(guān)文章
JavaScript 關(guān)于事件循環(huán)機制的刨析
js里的事件循環(huán)機制十分有趣。從很多面試題也可以看出來,考察簡單的setTimeout也就是考察這個機制的,接下來本文帶你詳細(xì)了解它2021-11-11
javascript學(xué)習(xí)筆記(四)function函數(shù)部分
本文主要介紹了函數(shù)的調(diào)用方式、返回函數(shù)的函數(shù)、創(chuàng)建匿名函數(shù)、javascript創(chuàng)建動態(tài)函數(shù)、回調(diào)函數(shù)、方法和函數(shù)的區(qū)別、js全局函數(shù)、函數(shù)的幾個作用、prototype屬性、高階函數(shù),非常實用,有需要的參考下2014-09-09
JavaScript CSS修改學(xué)習(xí)第六章 拖拽
這是一個簡單可用的拖拽代碼。用鼠標(biāo)和鍵盤都可以操作。2010-02-02
javascript Function函數(shù)理解與實戰(zhàn)
小編給大家?guī)硪黄P(guān)于javascript的基礎(chǔ)教學(xué)內(nèi)容,關(guān)于Function函數(shù)的訓(xùn)練與理解,一起學(xué)習(xí)下吧。2017-12-12

