基于JavaScript實(shí)現(xiàn)繼承機(jī)制之構(gòu)造函數(shù)+原型鏈混合方式的使用詳解
構(gòu)造函數(shù)、原型實(shí)現(xiàn)繼承的缺陷
首先來(lái)分析構(gòu)造函數(shù)和原型鏈兩種實(shí)現(xiàn)繼承方式的缺陷:
構(gòu)造函數(shù)(對(duì)象冒充)的主要問(wèn)題是必須使用構(gòu)造函數(shù)方式,且無(wú)法繼承通過(guò)原型定義的方法,這不是最好的選擇。不過(guò)如果使用原型鏈,就無(wú)法使用帶參數(shù)的構(gòu)造函數(shù)了。開發(fā)者如何選擇呢?答案很簡(jiǎn)單,兩者都用。
構(gòu)造函數(shù)+原型混合方式
這種繼承方式使用構(gòu)造函數(shù)定義類,并非使用任何原型。創(chuàng)建類的最好方式是用構(gòu)造函數(shù)定義屬性,用原型定義方法。這種方式同樣適用于繼承機(jī)制,用對(duì)象冒充繼承構(gòu)造函數(shù)的屬性,用原型鏈繼承 prototype 對(duì)象的方法。用這兩種方式重寫前面的例子,代碼如下:
function ClassA(sColor) {
this.color = sColor;
}
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function () {
alert(this.name);
};
在此例子中,繼承機(jī)制由兩行突出顯示的藍(lán)色代碼實(shí)現(xiàn)。在第一行突出顯示的代碼中,在 ClassB 構(gòu)造函數(shù)中,用對(duì)象冒充繼承 ClassA 類的 sColor 屬性。在第二行突出顯示的代碼中,用原型鏈繼承 ClassA 類的方法。由于這種混合方式使用了原型鏈,所以 instanceof 運(yùn)算符仍能正確運(yùn)行。
下面的例子測(cè)試了這段代碼:
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //輸出 "blue"
objB.sayColor(); //輸出 "red"
objB.sayName(); //輸出 "John"
- JavaScript繼承基礎(chǔ)講解(原型鏈、借用構(gòu)造函數(shù)、混合模式、原型式繼承、寄生式繼承、寄生組合式繼承)
- 深入淺析js原型鏈和vue構(gòu)造函數(shù)
- 一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈
- JavaScript中構(gòu)造函數(shù)與原型鏈之間的關(guān)系詳解
- JS精髓原型鏈繼承及構(gòu)造函數(shù)繼承問(wèn)題糾正
- javascript的構(gòu)造函數(shù), 原型,原型鏈和new你了解多少
- JavaScript原型和原型鏈與構(gòu)造函數(shù)和實(shí)例之間的關(guān)系詳解
- JavaScript構(gòu)造函數(shù)與原型、原型鏈?zhǔn)纠斀?/a>
相關(guān)文章
JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何動(dòng)態(tài)監(jiān)聽DOM元素高度,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-07-07
基于javascript的JSON格式頁(yè)面展示美化方法
本文介紹的方法基于javascript,css和myFunction結(jié)合可實(shí)現(xiàn)頁(yè)面展示轉(zhuǎn)換,下面有個(gè)示例,大家可以參考下2014-07-07
原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格的方法,效果十分棒,需要的朋友可以參考下2015-01-01
javaScript讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)實(shí)現(xiàn)代碼
讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn),在應(yīng)用中很常見,接下來(lái)提供解決方案,按興趣的朋友可以了解下2013-01-01
js借助ActiveXObject實(shí)現(xiàn)創(chuàng)建文件
創(chuàng)建文件的方法有很多,在本文為大家詳細(xì)介紹下js中時(shí)如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)了2013-09-09
js寫一個(gè)字符串轉(zhuǎn)成駝峰的實(shí)例
寫一個(gè)字符串轉(zhuǎn)成駝峰的方法,使用js代碼實(shí)現(xiàn),具體如下,感興趣的朋友可以了解下哈2013-06-06
webpack 動(dòng)態(tài)批量加載文件的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack 動(dòng)態(tài)批量加載文件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JavaScript中的定時(shí)器之Item23的合理使用
window對(duì)象提供了兩個(gè)方法來(lái)實(shí)現(xiàn)定時(shí)器的效果,分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時(shí)間后運(yùn)行;而后者則可以使一段代碼每過(guò)指定時(shí)間就運(yùn)行一次2015-10-10

