淺談JS原型對(duì)象和原型鏈
來(lái)源:易賢網(wǎng) 閱讀:842 次 日期:2016-08-02 16:24:11
溫馨提示:易賢網(wǎng)小編為您整理了“淺談JS原型對(duì)象和原型鏈”,方便廣大網(wǎng)友查閱!

在Javascript中,萬(wàn)物皆對(duì)象,但對(duì)象也有區(qū)別,大致可以分為兩類,即:普通對(duì)象(Object)和函數(shù)對(duì)象(Function)。

一般而言,通過(guò)new Function產(chǎn)生的對(duì)象是函數(shù)對(duì)象,其他對(duì)象都是普通對(duì)象。

舉例說(shuō)明:

function f1(){

  //todo

}

var f2 = function(){

  //todo

};

var f3 = new Function('x','console.log(x)');

var o1 = {};

var o2 = new Object();

var o3 = new f1();

console.log(

  typeof f1,//function

  typeof f2,//function

  typeof f3,//function

  typeof o1,//object

  typeof o2,//object

  typeof o3 //object

);

>> function function function object object object

f1屬于函數(shù)的聲明,最常見(jiàn)的函數(shù)定義方式,f2實(shí)際上是一個(gè)匿名函數(shù),把這個(gè)匿名函數(shù)賦值給了f2,屬于函數(shù)表達(dá)式,f3不常見(jiàn),但也是一種函數(shù)對(duì)象。

Function是JS自帶的對(duì)象,f1,f2在創(chuàng)建的時(shí)候,JS會(huì)自動(dòng)通過(guò)new Function()的方式來(lái)構(gòu)建這些對(duì)象,因此,這三個(gè)對(duì)象都是通過(guò)new Function()創(chuàng)建的。

在Javascript中創(chuàng)建對(duì)象有兩種方式:對(duì)象字面量和使用new表達(dá)式,o1和o2的創(chuàng)建恰好對(duì)應(yīng)了這兩種方式,重點(diǎn)講一下o3, 如果用Java和C#的思路來(lái)理解的話,o3是f1的實(shí)例對(duì)象,o3和f1是同一類型,至少我以前這么認(rèn)為,其實(shí)不然…

那么怎么理解呢? 很簡(jiǎn)單,看o3是不是通過(guò)new Function產(chǎn)生的, 顯然不是,既然不是函數(shù)對(duì)象,那就是普通對(duì)象 。

通過(guò)對(duì)函數(shù)對(duì)象和普通對(duì)象的簡(jiǎn)單理解之后,我們?cè)賮?lái)了解一下Javascript中的原型和原型鏈:

在JS中,每當(dāng)創(chuàng)建一個(gè)函數(shù)對(duì)象f1 時(shí),該對(duì)象中都會(huì)內(nèi)置一些屬性,其中包括prototype和__proto__,  prototype即原型對(duì)象,它記錄著f1的一些屬性和方法。

需要注意的是,prototype 對(duì)f1是不可見(jiàn)的,也就是說(shuō),f1不會(huì)查找prototype中的屬性和方法。

function f(){}

f.prototype.foo = "abc";

console.log(f.foo); //undefined

那么,prototype有什么用呢? 其實(shí)prototype的主要作用就是繼承。 通俗一點(diǎn)講,prototype中定義的屬性和方法都是留給自己的“后代”用的,因此,子類完全可以訪問(wèn)prototype中的屬性和方法。

想要知道f1是如何把prototype留給“后代”,我們需要了解一下JS中的原型鏈,此時(shí),JS中的 __proto__ 入場(chǎng)了,這哥們長(zhǎng)的很奇特,隱藏的也很深,以致于你經(jīng)常見(jiàn)不到它,但它在普通對(duì)象和函數(shù)對(duì)象中都存在, 它的作用就是保存父類的prototype對(duì)象,JS在通過(guò)new 表達(dá)式創(chuàng)建一個(gè)對(duì)象的時(shí)候,通常會(huì)把父類的prototype賦值給新對(duì)象的__proto__屬性,這樣,就形成了一代代傳承…

function f(){}

f.prototype.foo = "abc";

var obj = new f();

console.log(obj.foo); //abc

名單

obj對(duì)象擁有這樣一個(gè)原型鏈以后,當(dāng)obj.foo執(zhí)行時(shí),obj會(huì)先查找自身是否有該屬性,但不會(huì)查找自己的prototype,當(dāng)找不到foo時(shí),obj就沿著原型鏈依次去查找…

在上面的例子中,我們?cè)趂的prototype上定義了foo屬性,這時(shí)obj就會(huì)在原型鏈上找到這個(gè)屬性并執(zhí)行。 

最后,用幾句話總結(jié)一下本文中涉及到的重點(diǎn):

原型鏈的形成真正是靠__proto__ 而非prototype,當(dāng)JS引擎執(zhí)行對(duì)象的方法時(shí),先查找對(duì)象本身是否存在該方法,如果不存在,會(huì)在原型鏈上查找,但不會(huì)查找自身的prototype。

一個(gè)對(duì)象的__proto__記錄著自己的原型鏈,決定了自身的數(shù)據(jù)類型,改變__proto__就等于改變對(duì)象的數(shù)據(jù)類型。

函數(shù)的prototype不屬于自身的原型鏈,它是子類創(chuàng)建的核心,決定了子類的數(shù)據(jù)類型,是連接子類原型鏈的橋梁。

在原型對(duì)象上定義方法和屬性的目的是為了被子類繼承和使用。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。

更多信息請(qǐng)查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:淺談JS原型對(duì)象和原型鏈
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)!
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢 | 簡(jiǎn)要咨詢須知 | 加入群交流 | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65317125(9:00—18:00) 獲取招聘考試信息及咨詢關(guān)注公眾號(hào):hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專用圖標(biāo)