JavaScript模擬實(shí)現(xiàn)繼承的方法

更新時(shí)間：2015年03月30日 16:34:14 作者：碼農(nóng)小牛

這篇文章主要介紹了JavaScript模擬實(shí)現(xiàn)繼承的方法,實(shí)例分析了javascript類的操作與模擬實(shí)現(xiàn)繼承的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JavaScript模擬實(shí)現(xiàn)繼承的方法。分享給大家供大家參考。具體分析如下：

我們都知道，在JavaScript中只能模擬實(shí)現(xiàn)OO中的"類"，也就意味著，在JavaScript中沒(méi)有類的繼承。我們也只能通過(guò)在原對(duì)象里添加或改寫(xiě)屬性來(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼，需要的朋友可以參考下
2012-06-06
Layui實(shí)現(xiàn)多條件查詢的示例代碼
本文主要介紹了Layui實(shí)現(xiàn)多條件查詢，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-12-12
JS實(shí)現(xiàn)的3D拖拽翻頁(yè)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的3D拖拽翻頁(yè)效果,通過(guò)鼠標(biāo)事件結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)拖拽翻頁(yè)的效果,需要的朋友可以參考下
2015-10-10
p5.js碼繪“跳動(dòng)的小正方形”的實(shí)現(xiàn)代碼
這篇文章主要介紹了p5.js碼繪“跳動(dòng)的小正方形”，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
javascript之卸載鼠標(biāo)事件的代碼
javascript之卸載鼠標(biāo)事件的代碼...
2007-05-05
原生js實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果
本文主要介紹了原生js實(shí)現(xiàn)無(wú)限循環(huán)輪播圖效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
去除html代碼里面的script正則方法
下面小編就為大家?guī)?lái)一篇去除html代碼里面的script正則方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
總結(jié)一些js自定義的函數(shù)
總結(jié)一些js自定義的函數(shù)...
2006-08-08
JavaScript是單線程指的是同一時(shí)間只能干一件事情,只有前面的事情執(zhí)行完,才能執(zhí)行后面的事情,這篇文章主要介紹了JavaScript宏任務(wù)(macrotask)和微任務(wù)(microtask) 執(zhí)行順序,需要的朋友可以參考下
2023-10-10