前言
在學(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的指向不一樣对蒲。如下圖:
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_鏈接的。
實例和實例化
總結(jié)
以上是我個人對于原型鏈的理解恒傻,如果有誤希望大家能夠指點。