JavaScript模擬實(shí)現(xiàn)繼承的方法
本文實(shí)例講述了JavaScript模擬實(shí)現(xiàn)繼承的方法。分享給大家供大家參考。具體分析如下:
我們都知道,在JavaScript中只能模擬實(shí)現(xiàn)OO中的"類",也就意味著,在JavaScript中沒(méi)有類的繼承。我們也只能通過(guò)在原對(duì)象里添加或改寫屬性來(lái)模擬實(shí)現(xiàn)。
先定義一個(gè)父類,
//父類 function ParentClass() { this.className = "ParentClass"; this.auth = "Auth"; this.version = "V1.0"; this.parentClassInfo = function () { return this.className + "\n" + this.auth + "\n" + this.version; } }
一、prototype 實(shí)現(xiàn):
//子類 //1、prototype繼承 function ChildClassByPrototype() { this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByPrototype.prototype = new ParentClass(); var cctest1 = new ChildClassByPrototype(); cctest1.parentClassInfo(); cctest1.classInfo();
這種方式很簡(jiǎn)單,只需把父類的實(shí)例賦值給子類的prototype屬性就行了,然后子類就可以使用父親的方法和屬性了。這里其實(shí)是用到了原型鏈向上查找的特性,比如這個(gè)例子中的 cctest1.parentClassInfo() 方法,JavaScript會(huì)先在ChildClassByPrototype的實(shí)例中查找是否有parentClassInfo()方法,子類中沒(méi)有,所以繼續(xù)查找ChildClassByPrototype.prototype屬性,而其prototype屬性的值是ParentClass的一個(gè)實(shí)例,該實(shí)例有parentClassInfo()方法,于是查找結(jié)束,調(diào)用成功。
二、apply 實(shí)現(xiàn):
//2、apply繼承 function ChildClassByApply() { ParentClass.apply(this, new Array()); //ParentClass.apply(this, []); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } }
JavaScript中的apply可以理解為用A方法替換B方法,第一個(gè)參數(shù)為B方法的對(duì)象本身,第二個(gè)參數(shù)為一個(gè)數(shù)組,該數(shù)組內(nèi)的值為需要傳遞給A方法對(duì)應(yīng)的參數(shù)列表,如果參數(shù)為空,即沒(méi)有參數(shù)傳遞,可通過(guò) new Array()、[] 來(lái)傳遞。
三、call + prototype 實(shí)現(xiàn):
//3、call+prototype繼承 function ChildClassByCall() { ParentClass.call(this, arguments); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByCall.prototype = new ParentClass();
call和apply作用類似,即都是用A方法替換B方法,只是傳遞的參數(shù)不一樣,call方法的第一個(gè)參數(shù)為B方法的對(duì)象本身,后續(xù)的參數(shù)則不用Array包裝,需直接依次進(jìn)行傳遞。既然作用差不多,為何多了一句 原型賦值呢?這是因?yàn)閏all方法只實(shí)現(xiàn)了方法的替換而沒(méi)有對(duì)對(duì)象屬性進(jìn)行復(fù)制操作。
每種方法都有其適用環(huán)境,比如,如果父類帶有有參構(gòu)造函數(shù):
function ParentClass(className, auth, version) { this.className = className; this.auth = auth; this.version = version; this.parentClassInfo = function () { return this.className + "\n" + this.auth + "\n" + this.version; } }
這種情況下,prototype就不適用了,可選用apply或call;
function ChildClassByApply(className, auth, version) { ParentClass.apply(this, [className, auth, version]); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } function ChildClassByCall(className, auth, version) { ParentClass.call(this, arguments[0], arguments[1], arguments[2]); //ParentClass.call(this, className, auth, version); this.date = "2013-07-26"; this.classInfo = function () { return this.parentClassInfo() + "\n" + this.date; } } ChildClassByCall.prototype = new ParentClass();
實(shí)例化:
var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0"); var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");
在apply和call中,又該如何取舍呢?在OO的繼承中,子類繼承于父類,那么它應(yīng)該也是父類的類型。即,ChildClassByCall、ChildClassByApply應(yīng)該也是ParentClass類型,但我們用"instanceof"檢測(cè)一下就會(huì)發(fā)現(xiàn),通過(guò)apply繼承的子類,并非ParentClass類型。所以,我們建議用call + prototype 來(lái)模擬實(shí)現(xiàn)繼承。據(jù)說(shuō),Google Map API 的繼承就是使用這種方式喲。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- Javascript編程之繼承實(shí)例匯總
- Javascript編程中幾種繼承方式比較分析
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(繼承)
- JavaScript中數(shù)組繼承的簡(jiǎn)單示例
- 淺談javascript原型鏈與繼承
- 淺談Javascript實(shí)現(xiàn)繼承的方法
- JavaScript的9種繼承實(shí)現(xiàn)方式歸納
- javascript繼承的六大模式小結(jié)
- JavaScript設(shè)計(jì)模式學(xué)習(xí)之“類式繼承”
- JavaScript的原型繼承詳解
- js實(shí)現(xiàn)繼承的5種方式
相關(guān)文章
JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)商品評(píng)價(jià)五星好評(píng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11小程序?qū)崿F(xiàn)簡(jiǎn)單驗(yàn)證碼倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單驗(yàn)證碼倒計(jì)時(shí),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Three.js+React實(shí)現(xiàn)3D文字懸浮效果
這篇文章主要介紹了如何利用Three.js+React制作出神奇的3D文字懸浮效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下2022-03-03javascript 禁止復(fù)制網(wǎng)頁(yè)
常見(jiàn)的一些禁止復(fù)制網(wǎng)頁(yè)的代碼,但破解方法也不見(jiàn)容易,這里就不說(shuō)了,可以看本站以前發(fā)布的文章。2009-06-06js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)3D圖片逐張輪播幻燈片特效,圖片輪播效果特別適合做產(chǎn)品展示,具有很強(qiáng)的立體效果,感興趣的小伙伴可以參考下。2015-09-09完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效
這篇文章主要介紹了完美實(shí)現(xiàn)仿QQ空間評(píng)論回復(fù)特效,非常的實(shí)用,附上實(shí)例代碼給大家,有需要的小伙伴參考下吧。2015-05-05JS 拖動(dòng)效果實(shí)現(xiàn)代碼 比較簡(jiǎn)單
JS拖動(dòng)效果,計(jì)算的位移,主要是應(yīng)用了鼠標(biāo)事件與坐標(biāo)控制。2009-11-11淺談JSON.parse()和JSON.stringify()
本文給大家簡(jiǎn)單描述了下JSON.parse()和JSON.stringify()的異同點(diǎn),十分的實(shí)用,有需要的小伙伴可以參考下2015-07-07