JS原型鏈

大家好,我是IT修真院成都分院第7期的學員韓建名,一枚正直純潔善良的WEB前端程序員。

今天給大家帶來的是:JS原型鏈

目錄

1.背景介紹

2.知識剖析

3.常見問題

4.解決方案

5.編碼實戰

6.擴展思考

7.參考文獻

8.更多討論

1.背景介紹

JavaScript對象是一個屬性的集合,另外有一個隱式的對象:原型對象。原型的值可以是一個對象或者null。一般的引擎實現中,JS對象會包含若干個隱藏屬性,對象的原型由這些隱藏屬性之一引用,我們在本文中討論時,將假定這個屬性的名稱為"__proto__"(事實上,SpiderMonkey內部正是使用了這個名稱,但是規范中并未做要求,因此這個名稱依賴于實現)。 由于原型對象本身也是對象,根據上邊的定義,它也有自己的原型,而它自己的原型對象又可以有自己的原型,這樣就組成了一條鏈,這個鏈就是原型鏈。

先來看看有什么用處

function Foo(){ this.y=2; } Foo.prototype.x=1; var obj3 = new Foo(); obj1.y;//2 obj1.x://1

這里就是用原型鏈繼承了Foo的屬性 obj1的原型(proto)會指向Foo的prototype屬性 當函數聲明的時候——function Foo(){} 實質上在做: 這個函數會有一個prototype屬性,且默認會有兩個屬性 Foo.prototype { constructor:Foo, __proto__:Object.prototype } prototype是函數對象上的預設的對象屬性,而原型通常都是其構造器的prototype屬性 實例的__proto__屬性會指向構造函數的prototype屬性

2.知識剖析

ECMAScript中描述了原型鏈的概念,并將原型鏈作為實現繼承的主要方法。其基本思想就是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。

JavaScritp引擎在訪問對象的屬性時,如果在對象本身中沒有找到,則會去原型鏈中查找,如果找到,直接返回值,如果整個鏈都遍歷且沒有找到屬性,則返回undefined.原型鏈一般實現為一個鏈表,這樣就可以按照一定的順序來查找。

原型的動態性:對原型對象所做的實時修改都能從實例上立即反應出來。(注意區別添加修改和重寫了原型對象)

原型對象包含指向構造函數的指針。a實例包含指向a原型對象內部的指針,使得我們可以訪問原型對象的屬性。如果讓b原型對象等于a對象的實例那我們就可以訪問a對象的原型對象及其屬性和方法了。同理a的原型對象也可以是通過該種方法從c繼承過來...

1.概念 ECMAScript中描述了原型鏈的概念,并將原型鏈作為實現繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。在JavaScript中,用 __proto__ 屬性來表示一個對象的原型鏈。當查找一個對象的屬性時,JavaScript 會向上遍歷原型鏈,直到找到給定名稱的屬性為止!

(1)原型:創建的每一個函數都有一個prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。如果按字面意思來理解,那么prototype就是通過調用構造函數而創建的那個對象實例的原型對象。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法。換句話說,不必在構造函數中定義對象實例的信息,而是可以將這些信息直接添加到原型對象中。 (2)原型對象:無論什么時候,只要創建了一個新函數,就會根據一組特定的規則為該函數創建一個prototype屬性,這個屬性指向函數的原型對象。在默認情況下,所有原型對象都會自動獲得一個constructor(構造函數)屬性,這個屬性是一個指向prototype屬性所在函數的指針。

普通對象和函數對象

JS中萬物皆對象,但對象也是有區別的,分為普通對象和函數對象,Object、Function是JS自帶的函數對象,上栗子

var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object

3.常見問題

原型鏈怎樣實現繼承

4.解決方案

原型對象包含指向構造函數的指針,這使得子類可以訪問到構造函數中的屬性。實例包含指向原型對象的內部的指針。

ex:

a實例包含指向a原型對象內部的指針,使得我們可以訪問原型對象的屬性。如果讓b原型對象等于a對象的實例那我們就可以訪問a對象的原型對象及其屬性和方法了。同理a的原型對象也可以是通過該種方法從c繼承過來...

5.編碼實戰

先給大家引入一個例子:組合使用構造函數模式和原型模式創建自定義類型

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

this.friends = ["Lance","Alice"];

}

Person.prototype = {

constructor : Person;

sayName : function() {

alert(this.name);

}

}

實現原型鏈的基本模式舉例:

function SuperType (){

this.property = true;

}

SuperType.prototype.getSuperValue = function(){

return this.property;

}

function SubType() {

this.subproperty = false ;

}

SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){

return this.subproperty;

};

var instance = new SubType();

alert(instance.getSuperValue());? ? //true

6.擴展思考

原型鏈繼承方式存在的問題。以及怎樣解決

7.參考文獻

《JavaScript高級程序設計》

8.擴展思考

其他實現繼承的方法還有哪些?

鳴謝

感謝大家觀看


js原型鏈淺析_騰訊視頻
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,533評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,055評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,365評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,561評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,346評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,889評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,978評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,118評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,637評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,558評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,739評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,246評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,980評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,619評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,347評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,702評論 2 370

推薦閱讀更多精彩內容