JavaScript原型繼承之基礎(chǔ)機(jī)制分析
更新時(shí)間:2011年08月26日 00:43:05 作者:
由于語言設(shè)計(jì)上的原因,JavaScript 沒有真正意義上“類”的概念。而通常使用的 new 命令實(shí)例化對(duì)象的方法,其實(shí)是對(duì)原型對(duì)象的實(shí)例化。
這一語言功能的本質(zhì)依賴于 JavaScript 特有的原型鏈(prototype chain)模式。
所以嚴(yán)格意義上說,JavaScript 是基于原型的面向?qū)ο笳Z言。也就是說,每個(gè)實(shí)例對(duì)象都具有一個(gè)原型。對(duì)象從該原型中繼承屬性和方法。
1、構(gòu)造函數(shù)
利用構(gòu)造函數(shù),可以簡(jiǎn)單地創(chuàng)建對(duì)象。構(gòu)造函數(shù)內(nèi)的 this 關(guān)鍵字指向?qū)嵗龑?duì)象本身:
function People(name){
this.name = name;
}
使用 new 運(yùn)算符和構(gòu)造函數(shù)創(chuàng)建實(shí)例對(duì)象:
var people = new People('小明');
console.log(people.name); //小明
但如果創(chuàng)建了兩個(gè)實(shí)例,這兩個(gè)實(shí)例之間無法直接共享屬性和方法:
var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined
也就是說對(duì)象一旦被實(shí)例化,其屬性方法都獨(dú)立存在,對(duì)某個(gè)屬性的修改不會(huì)影響到其他實(shí)例。
2、Prototype
于是就有了 prototype 屬性,這個(gè)屬性是在生成實(shí)例對(duì)象時(shí)自動(dòng)創(chuàng)建的。它本身又是一個(gè)對(duì)象,擁有能夠在實(shí)例間共享的屬性和方法。而實(shí)例本身的屬性和方法,則包含在構(gòu)造函數(shù)中。換句話說,構(gòu)造函數(shù)內(nèi)部的屬性和方法,在經(jīng)過實(shí)例化后都成為了本地的屬性和方法,而原型(prototype)中的屬性和方法在實(shí)例中只是一種引用,因此能夠被多個(gè)實(shí)例共享。
還是剛才那個(gè)構(gòu)造函數(shù),現(xiàn)在為它增加 prototype 屬性:
People.prototype.sex = 'female';
//或者寫成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female
People 構(gòu)造函數(shù)的 prototype 屬性參數(shù)會(huì)直接影響到 people1 和 people2 兩個(gè)實(shí)例。
但為什么 people1.sex 輸出 male 呢?這是由于在 JavaScript 中,原型關(guān)系以遞歸形式存在。對(duì)象的原型也是一個(gè)對(duì)象,而原型的本身也可能具有一個(gè)原型。原型的最高層級(jí)是全局的 Object 對(duì)象。
這就是說,一旦 people1.sex 被設(shè)置為 male 后,它在原型中對(duì)應(yīng)的值就無法被暴露出來。假如 people1.sex 本身沒有值,才會(huì)從構(gòu)造函數(shù)的 prototype 屬性中讀取,以此類推一級(jí)一級(jí)向上查找,直到 Object 對(duì)象。
注:使用 “null” 給對(duì)象賦值,可以銷毀自定義對(duì)象,釋放內(nèi)存資源。
所以嚴(yán)格意義上說,JavaScript 是基于原型的面向?qū)ο笳Z言。也就是說,每個(gè)實(shí)例對(duì)象都具有一個(gè)原型。對(duì)象從該原型中繼承屬性和方法。
1、構(gòu)造函數(shù)
利用構(gòu)造函數(shù),可以簡(jiǎn)單地創(chuàng)建對(duì)象。構(gòu)造函數(shù)內(nèi)的 this 關(guān)鍵字指向?qū)嵗龑?duì)象本身:
復(fù)制代碼 代碼如下:
function People(name){
this.name = name;
}
使用 new 運(yùn)算符和構(gòu)造函數(shù)創(chuàng)建實(shí)例對(duì)象:
復(fù)制代碼 代碼如下:
var people = new People('小明');
console.log(people.name); //小明
但如果創(chuàng)建了兩個(gè)實(shí)例,這兩個(gè)實(shí)例之間無法直接共享屬性和方法:
復(fù)制代碼 代碼如下:
var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined
也就是說對(duì)象一旦被實(shí)例化,其屬性方法都獨(dú)立存在,對(duì)某個(gè)屬性的修改不會(huì)影響到其他實(shí)例。
2、Prototype
于是就有了 prototype 屬性,這個(gè)屬性是在生成實(shí)例對(duì)象時(shí)自動(dòng)創(chuàng)建的。它本身又是一個(gè)對(duì)象,擁有能夠在實(shí)例間共享的屬性和方法。而實(shí)例本身的屬性和方法,則包含在構(gòu)造函數(shù)中。換句話說,構(gòu)造函數(shù)內(nèi)部的屬性和方法,在經(jīng)過實(shí)例化后都成為了本地的屬性和方法,而原型(prototype)中的屬性和方法在實(shí)例中只是一種引用,因此能夠被多個(gè)實(shí)例共享。
還是剛才那個(gè)構(gòu)造函數(shù),現(xiàn)在為它增加 prototype 屬性:
復(fù)制代碼 代碼如下:
People.prototype.sex = 'female';
//或者寫成 People.prototype = {sex: 'female'};
console.log(people1.sex); //male
console.log(people2.sex); //female
People 構(gòu)造函數(shù)的 prototype 屬性參數(shù)會(huì)直接影響到 people1 和 people2 兩個(gè)實(shí)例。
但為什么 people1.sex 輸出 male 呢?這是由于在 JavaScript 中,原型關(guān)系以遞歸形式存在。對(duì)象的原型也是一個(gè)對(duì)象,而原型的本身也可能具有一個(gè)原型。原型的最高層級(jí)是全局的 Object 對(duì)象。
這就是說,一旦 people1.sex 被設(shè)置為 male 后,它在原型中對(duì)應(yīng)的值就無法被暴露出來。假如 people1.sex 本身沒有值,才會(huì)從構(gòu)造函數(shù)的 prototype 屬性中讀取,以此類推一級(jí)一級(jí)向上查找,直到 Object 對(duì)象。
注:使用 “null” 給對(duì)象賦值,可以銷毀自定義對(duì)象,釋放內(nèi)存資源。
相關(guān)文章
JS實(shí)現(xiàn)統(tǒng)計(jì)字符串中字符出現(xiàn)個(gè)數(shù)及最大個(gè)數(shù)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)字符串中字符出現(xiàn)個(gè)數(shù)及最大個(gè)數(shù)功能,結(jié)合實(shí)例形式分析了javascript字符串遍歷、統(tǒng)計(jì)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
javaScript刪除對(duì)象屬性的幾種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于javaScript刪除對(duì)象屬性的幾種方法的相關(guān)資料,它們?cè)诓煌瑘?chǎng)景下有不同的應(yīng)用,需要根據(jù)實(shí)際情況選擇最合適的刪除方法,文中通過實(shí)例代碼介紹的非常詳細(xì),下面需要的朋友可以參考下2023-06-06
js字符串截取函數(shù)slice、substring和substr的比較
這篇文章主要震碎js字符串截取函數(shù)slice、substring和substr進(jìn)行比較,感興趣的小伙伴們可以參考一下2016-05-05
微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間戳格式轉(zhuǎn)換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易tab欄切換案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06

