JavaScript原型繼承之基礎(chǔ)機(jī)制分析
所以嚴(yán)格意義上說(shuō),JavaScript 是基于原型的面向?qū)ο笳Z(yǔ)言。也就是說(shuō),每個(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í)例之間無(wú)法直接共享屬性和方法:
var people1 = new People('小明');
var people2 = new People('小王');
people1.sex = 'male';
console.log(people2.sex); //undefined
也就是說(shuō)對(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ù)中。換句話說(shuō),構(gòu)造函數(shù)內(nèi)部的屬性和方法,在經(jīng)過(guò)實(shí)例化后都成為了本地的屬性和方法,而原型(prototype)中的屬性和方法在實(shí)例中只是一種引用,因此能夠被多個(gè)實(shí)例共享。
還是剛才那個(gè)構(gòu)造函數(shù),現(xiàn)在為它增加 prototype 屬性:
People.prototype.sex = 'female';
//或者寫(xiě)成 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ì)象。
這就是說(shuō),一旦 people1.sex 被設(shè)置為 male 后,它在原型中對(duì)應(yīng)的值就無(wú)法被暴露出來(lái)。假如 people1.sex 本身沒(méi)有值,才會(huì)從構(gòu)造函數(shù)的 prototype 屬性中讀取,以此類(lèi)推一級(jí)一級(jí)向上查找,直到 Object 對(duì)象。
注:使用 “null” 給對(duì)象賦值,可以銷(xiāo)毀自定義對(duì)象,釋放內(nèi)存資源。
相關(guān)文章
js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明
這篇文章主要介紹了js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法
本文主要介紹了Typescript中使用引用路徑別名報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07JavaScript手寫(xiě)九宮格抽獎(jiǎng)demo
這篇文章主要為大家介紹了JavaScript 手寫(xiě)九宮格抽獎(jiǎng)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10JavaScript 自動(dòng)完成腳本整理(33個(gè))
所謂的提升用戶體驗(yàn),其實(shí)就是把所有用戶視為極度弱智和超級(jí)懶鬼。比如JavaScript自動(dòng)完成(Autocomplete)腳本, 常用于表單,用戶只需輸入一兩個(gè)字母,就為你擴(kuò)展、聯(lián)想、匹配和供君選擇。2009-10-10JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03layui form.render(''select'', ''test2'') 更新渲染的方法
今天小編就為大家分享一篇layui form.render('select', 'test2') 更新渲染的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09純JS實(shí)現(xiàn)圖片驗(yàn)證碼功能并兼容IE6-8(推薦)
這篇文章主要介紹了純JS實(shí)現(xiàn)圖片驗(yàn)證碼功能并兼容IE6-8瀏覽器,需要的朋友可以參考下2017-04-04JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)groupBy函數(shù)詳解
今天在打算從js端時(shí)序數(shù)據(jù)庫(kù)TSDB中,按相同的類(lèi)型的數(shù)據(jù)排在一起,并且取同一時(shí)間段最新的數(shù)據(jù),經(jīng)過(guò)查詢這種思想叫做數(shù)據(jù)聚合,就是返回的數(shù)據(jù)要根據(jù)一個(gè)屬性來(lái)做計(jì)算,這篇文章主要介紹了JavaScript數(shù)組中相同的元素進(jìn)行分組(數(shù)據(jù)聚合)?groupBy函數(shù),需要的朋友可以參考下2023-12-12webpack5的entry和output配置小白學(xué)習(xí)
這篇文章主要為大家介紹了webpack5的entry和output使用配置小白學(xué)習(xí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05