要了解原型和原型鏈,首先要理解普通對(duì)象和函數(shù)對(duì)象。
一、普通對(duì)象和函數(shù)對(duì)象的區(qū)別
在Javascript的世界里,全都是對(duì)象,而對(duì)象之間也是存在區(qū)別,我們首先區(qū)分一下普通對(duì)象和函數(shù)對(duì)象,如下代碼:
function f1(){};var f2 = function(){};var f3 = new function(){};var o1 = {};var o2 = new Object();var o3 = new f1();console.log(typeof Object); //functionconsole.log(typeof Function);//functionconsole.log(typeof f1) //functionconsole.log(typeof f2) // functionconsole.log(typeof f3) //functionconsole.log(typeof o1) //objectconsole.log(typeof o2) //objectconsole.log(typeof o3)// object在上面的代碼中可以看出,f1、f2和f3都是函數(shù)對(duì)象,而o1,o2和o3都是object對(duì)象,也就是普通對(duì)象,函數(shù)對(duì)象本質(zhì)就是由new function()構(gòu)造而來(lái),其他的都是普通對(duì)象;函數(shù)對(duì)象和普通對(duì)象理解之后,后文會(huì)說(shuō)明兩者的區(qū)別。
二、原型
在JavaScript中,原型也是一個(gè)對(duì)象,原型的作用,則是實(shí)現(xiàn)對(duì)象的繼承。
在js的所有函數(shù)對(duì)象中,都存在一個(gè)屬性prototype,該屬性對(duì)應(yīng)當(dāng)前對(duì)象的原型。
而所有的JavaScript對(duì)象,都存在一個(gè)_proto_屬性(由于_proto_是個(gè)非標(biāo)準(zhǔn)屬性,因此只有ff和chrome兩個(gè)瀏覽器支持,標(biāo)準(zhǔn)方法是Object.getPrototypeOf()),_proto_屬性指向?qū)嵗龑?duì)象的構(gòu)造函數(shù)的原型,理解起來(lái)就如下:
var p = new Person(); console.log(p._proto === Person.prototype)//true
從上面代碼可以看出,p是實(shí)例對(duì)象,Person是p的構(gòu)造函數(shù),可以看出來(lái)p的_proto_屬性指向構(gòu)造函數(shù)Person的原型。
下面用代碼來(lái)解釋一下js是如何通過(guò)原型進(jìn)行繼承的:
var parent = function(name){ this.name = name;}parent.prototype.getName = function(){ return this.name;}var son = new parent("huahua");console.log(son.getName());//'huahua'顯然,son繼承了parent的原型中的函數(shù)屬性getName。
三、原型鏈
除開Object的prototype的原型是null以外,所有的對(duì)象和原型都有自己的原型,對(duì)象的原型指向原型對(duì)象。
在層級(jí)多的關(guān)系中,多個(gè)原型層層相連則構(gòu)成了原型鏈。
在查找一個(gè)對(duì)象的屬性時(shí),倘若在當(dāng)前對(duì)象找不到該屬性,則會(huì)沿著原型鏈一直往上查找,知道找到為止,如果到了原型鏈頂端,還沒找到,則返回undefined。

四、constructor
constructor是構(gòu)造函數(shù)創(chuàng)建的實(shí)例的屬性,該屬性的作用是指向創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)。
例如,son.constructor == parent;//true
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注