javascript原型鏈

前言

在學(xué)習(xí)js之路上難免會遇上經(jīng)典問題原型鏈,而且這個概念相對而言比較難以理解厉亏。查閱了網(wǎng)上很多參考,文章烈和。五花八門有些確實寫的不錯爱只,有些反而讓我看了有點懵逼。為了方便自己日后回顧斥杜,抱著學(xué)習(xí)和記錄的態(tài)度以一個小白的角度希望能把自己對于這個概念的理解擼一擼虱颗。

  • 實例和實例化
  • 普通函數(shù)和構(gòu)造函數(shù)的區(qū)別
  • prototype、_proto_蔗喂、constructor
  • 參考文獻

實例和實例化

function Aa(name,age){
  this.name=name;
  this.age=age;
}
//或者
function Ba(name){
  console.log(name)
}

以上就是一個普通函數(shù)忘渔。創(chuàng)建函數(shù)便是普通函數(shù)。

var bb = new Aa();

構(gòu)造函數(shù)的聲明缰儿,我們需要通過new這個關(guān)鍵字來創(chuàng)建一個構(gòu)造函數(shù)畦粮。如上所示,整個過程便是實例化乖阵,而變量bb則是一個實例宣赔。我們可以打印出bb,它對應(yīng)的就是Aa()這個普通函數(shù)瞪浸。

普通函數(shù)和構(gòu)造函數(shù)的區(qū)別

//普通函數(shù)(Aa函數(shù)中的this=>window)
function Aa(name,age){
  this.name=name;
  this.age=age;
}
//構(gòu)造函數(shù)(bb實例中的Aa函數(shù)中的this=>bb)
var bb = new Aa();

1.普通函數(shù)我們使用首字母大寫儒将;而構(gòu)造函數(shù)則使用首字母小寫。
2.兩者最大的區(qū)別便是this的指向不一樣对蒲。如下圖:

未命名文件.png

prototype钩蚊、_proto_、constructor

想要理解原型鏈還需要明白為什么產(chǎn)生原型鏈蹈矮,這里我推薦大家看一下阮一峰對于原型鏈的解釋砰逻,很形象很容易懂。
簡單的說:當我們通過new關(guān)鍵字去實例化一個構(gòu)造函數(shù)的時候泛鸟,這個實例便擁有了實例對象(就是那個普通函數(shù))的方法和屬性蝠咆。

function Aa(name,age){
  this.name=name;
  this.age=age;
}
var bb = new Aa();
var cc = new Aa();

如上所示,bb和cc都擁有了與Aa()相同北滥,且獨立的屬性和方法刚操,他們之間相互獨立闸翅。也正式因為獨立,就產(chǎn)生了問題赡茸!如果我希望改變bb中的某個屬性缎脾,同時希望cc也跟著變化呢?
這個時候占卧,我們就需要一個公共的屬性和方法的集合(即一個存儲公共屬性和方法的容器)遗菠。

prototype

這個所謂的容器出現(xiàn)了。在我們創(chuàng)建普通函數(shù)的時候华蜒,就會產(chǎn)生一個prototype辙纬。然后我們可以使用如下方式在普通函數(shù)中存放公共的屬性和方法。

function Aa(name,age){
  this.name=name;
  this.age=age;
}
var bb=new Aa();
var cc= new Aa()叭喜;

Aa.prototype.sayName=function(){
  console.log("123")
}
Aa.prototype.sex="男"

如上所示:我們實例bb和cc都擁有例sayName和sex贺拣;同時,當我們修改sayName或sex的時候捂蕴,bb和cc也會跟著變化譬涡。

function Aa(name,age){
  this.name=name;
  this.age=age;
}
var bb=new Aa();
var cc= new Aa();

bb.constructor.prototype.sex="女"

如上所示:我們也可以使用bb或者cc來修改sayName和sex啥辨。其實就是去修改Aa.prototype中的屬性和方法涡匀。

constructor

關(guān)于constructor,如上所說:當我們需要通過實例bb或者cc來修改我們Aa()上的prototype中的屬性或者方法的時候溉知。我們就需要constructor這個屬性了陨瘩。
簡單的說:這個屬性其實就是Aa()這個函數(shù)

//在控制臺中輸入如下
function Aa(){};//創(chuàng)建了一個普通函數(shù)
var bb=new Aa();//實例化了一個構(gòu)造函數(shù)
bb.constructor===Aa;//true

如上所示:證明bb.constructor確實是等于Aa()這個函數(shù)的级乍。

function Aa(){};
Aa.prototype.sex="男"舌劳;
var bb = new Aa();
bb.constructor.prototype.sex===Aa.prototype.sex;//true

如上所示,我們便直接通過bb.constructor.prototype來修改Aa.prototype里的屬性或者方法玫荣。

_proto_

通過上面的內(nèi)容甚淡,我們基本已經(jīng)明白了原型鏈中各個名詞的作用。至于_proto我個人的理解捅厂,我們說所的原型鏈中的便是通過_proto串聯(lián)起來材诽。
我們可以通過控制臺看一下我們一個實例是如何通過 _proto_鏈接的。

4791520218428_.pic_hd.jpg

實例和實例化

阮一峰的Javascript繼承機制的設(shè)計思想

總結(jié)

以上是我個人對于原型鏈的理解恒傻,如果有誤希望大家能夠指點。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末建邓,一起剝皮案震驚了整個濱河市盈厘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌官边,老刑警劉巖沸手,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件外遇,死亡現(xiàn)場離奇詭異,居然都是意外死亡契吉,警方通過查閱死者的電腦和手機跳仿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來捐晶,“玉大人菲语,你說我怎么就攤上這事』罅椋” “怎么了山上?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長英支。 經(jīng)常有香客問我佩憾,道長,這世上最難降的妖魔是什么干花? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任妄帘,我火速辦了婚禮,結(jié)果婚禮上池凄,老公的妹妹穿的比我還像新娘抡驼。我一直安慰自己,他們只是感情好修赞,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布婶恼。 她就那樣靜靜地躺著,像睡著了一般柏副。 火紅的嫁衣襯著肌膚如雪勾邦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天割择,我揣著相機與錄音眷篇,去河邊找鬼。 笑死荔泳,一個胖子當著我的面吹牛蕉饼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播玛歌,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼昧港,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了支子?” 一聲冷哼從身側(cè)響起创肥,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后叹侄,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巩搏,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片数冬。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡囊咏,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布睦擂,位于F島的核電站,受9級特大地震影響杖玲,放射性物質(zhì)發(fā)生泄漏顿仇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一摆马、第九天 我趴在偏房一處隱蔽的房頂上張望臼闻。 院中可真熱鬧,春花似錦囤采、人聲如沸述呐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽乓搬。三九已至,卻和暖如春代虾,著一層夾襖步出監(jiān)牢的瞬間进肯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工棉磨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留江掩,地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓乘瓤,卻偏偏與公主長得像环形,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子衙傀,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355