詳解一個(gè)小實(shí)例理解js原型和繼承
導(dǎo)語(yǔ)1:一個(gè)構(gòu)造函數(shù)的原型對(duì)象,其實(shí)就是這個(gè)構(gòu)造函數(shù)的一個(gè)屬性而已,屬性名叫prototype,值是一個(gè)對(duì)象,對(duì)象中有一些屬性和方法,所以每個(gè)構(gòu)造函數(shù)的實(shí)例對(duì)象都擁有這些屬性和方法的使用權(quán)。
導(dǎo)語(yǔ)2:構(gòu)造函數(shù)需要用 new 操作符來(lái)調(diào)用,它本身沒(méi)有任何意義,只有實(shí)例化后才有生命,當(dāng)然你也可以把它當(dāng)普通函數(shù)使用,那this就是指向window了(意義不大)。
導(dǎo)語(yǔ)3:對(duì)于構(gòu)造函數(shù)實(shí)例化出一個(gè)對(duì)象經(jīng)歷了什么?
我們看下面這個(gè)例子:
這個(gè)例子充分說(shuō)明了,大佬們創(chuàng)造出構(gòu)造函數(shù)這種東西,是有特殊用處的,本身沒(méi)什么意義,在實(shí)例化后瞬間有了生命。
好了有這些準(zhǔn)備工作后,我們開(kāi)始寫(xiě)一個(gè)構(gòu)造函數(shù)+原型用法
廢話不多說(shuō)直接上代碼!??!
1,這個(gè)例子中有個(gè)構(gòu)造函數(shù),名字叫GetElem,參數(shù)期望傳入的是一個(gè)元素的id,可以獲取這個(gè)id的元素;
2,實(shí)例化一個(gè)叫domOne的對(duì)象,它傳入一個(gè)實(shí)參為:“old”;所以它可以獲取這個(gè)id為old的元素
3,在構(gòu)造函數(shù)的原型上定義一個(gè)方法叫:changeInner 作用是如果傳入了實(shí)參就用實(shí)參來(lái)改變?cè)氐膬?nèi)容
4,在構(gòu)造函數(shù)的原型上定義一個(gè)方法叫:on作用是根據(jù)事件類(lèi)型和對(duì)應(yīng)函數(shù)干一些事情;
domOne這個(gè)實(shí)例化對(duì)象中并沒(méi)有這兩個(gè)方法,但是沒(méi)關(guān)系,它的原型對(duì)象上擁有?。。?!所以可以直接用;
您一定會(huì)問(wèn)為何不直接把方法寫(xiě)在構(gòu)造函數(shù)中不就省事了?原因是這樣的話,每實(shí)例化一個(gè)對(duì)象都要在實(shí)例化過(guò)程中創(chuàng)建這些方法,
如果實(shí)例化太多就消耗性能,而放在原型對(duì)象上就只需要做一次。這也是構(gòu)造函數(shù)+原型優(yōu)于工廠模式的方面。
最后一張圖:
方法可以鏈接起來(lái)寫(xiě)的原因是 在每個(gè)方法中 return this (this指向的是實(shí)例對(duì)象,當(dāng)然可以繼續(xù)調(diào)用它可以調(diào)用的方法啦?。?!)
以上所述是小編給大家介紹的js原型和繼承詳解整合,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript中條件語(yǔ)句的優(yōu)化技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中條件語(yǔ)句的優(yōu)化技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12前端開(kāi)發(fā)不得不知的10個(gè)最佳ES6特性
ES6已經(jīng)不再是JavaScript最新的標(biāo)準(zhǔn),但是它已經(jīng)廣泛用于編程實(shí)踐中。下面通過(guò)本文給大家分享前端開(kāi)發(fā)不得不知的10個(gè)最佳ES6特性,感興趣的朋友參考下吧2017-08-08AJAX使用了UpdatePanel后無(wú)法使用alert彈出腳本
今天在做項(xiàng)目的時(shí)候發(fā)現(xiàn)個(gè)問(wèn)題。。使用UpdatePanel后alert腳本就要報(bào)錯(cuò)了。2010-04-04JavaScript實(shí)現(xiàn)存儲(chǔ)HTML字符串示例
這篇文章主要介紹了JavaScript存儲(chǔ)HTML字符串的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04javascript變量作用域使用中常見(jiàn)錯(cuò)誤總結(jié)
剛看了一篇文章對(duì)js作用域的理解又會(huì)上升到一個(gè)新的臺(tái)階,javascript里變量作用域是個(gè)經(jīng)常讓人頭痛抓狂的問(wèn)題,接下來(lái)對(duì)經(jīng)常遇到又容易出錯(cuò)的情況進(jìn)行了簡(jiǎn)單總結(jié),感興趣的各位可以參考下哈2013-03-03js的壓縮及jquery壓縮探討(提高頁(yè)面加載性能/保護(hù)勞動(dòng)成果)
搞定js的加密和壓縮,一方面可以提高頁(yè)面加載性能,另外一方面也希望辛苦研發(fā)出來(lái)的成果得到一定的保護(hù),感興趣的朋友可以了解下,或許對(duì)你有所幫助2013-01-01uniapp微信小程序訂閱消息發(fā)送服務(wù)通知超詳細(xì)教程
在使用或開(kāi)發(fā)小程序過(guò)程中,我們會(huì)發(fā)現(xiàn)消息通知是非常重要的一個(gè)環(huán)節(jié),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的相關(guān)資料,需要的朋友可以參考下2023-06-06