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

四、constructor
constructor是構(gòu)造函數(shù)創(chuàng)建的實(shí)例的屬性,該屬性的作用是指向創(chuàng)建當(dāng)前對象的構(gòu)造函數(shù)。
例如,son.constructor == parent;//true
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)鼠標(biāo)滑過鏈接改變網(wǎng)頁背景顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)滑過鏈接改變網(wǎng)頁背景顏色的方法,涉及js響應(yīng)鼠標(biāo)事件動態(tài)修改頁面元素屬性的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JavaScript實(shí)現(xiàn)生成動態(tài)表格和動態(tài)效果的方法詳解
這篇文章主要介紹了如何通過JavaScript語言實(shí)現(xiàn)動圖表格的生成以及動態(tài)效果的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-02-02
js自動閉合html標(biāo)簽(自動補(bǔ)全html標(biāo)記)
假如我有一個(gè)DIV,如果沒有閉合后面的樣式都會亂了,這樣的代碼可能會影響后面的樣式,我希望用JS去自動閉合這種沒有閉合的標(biāo)簽2012-10-10
解決JSON.parse轉(zhuǎn)化不規(guī)范json字符串的問題
這篇文章主要介紹了解決JSON.parse轉(zhuǎn)化不規(guī)范json字符串的問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09

