JavaScript類比實現繼承的方法

JavaScript類比實現繼承的方法

 這篇文章主要介紹了JavaScript類比實現繼承的方法,執行個體分析了javascript類的操作與類比實現繼承的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

 

 

本文執行個體講述了JavaScript類比實現繼承的方法。分享給大家供大家參考。具體分析如下：

我們都知道，在JavaScript中只能類比實現OO中的"類"，也就意味著，在JavaScript中沒有類的繼承。我們也只能通過在原對象裡添加或改寫屬性來類比實現。

先定義一個父類，

?

1 2 3 4 5 6 7 8 9

//父類 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 實現：

?

1 2 3 4 5 6 7 8 9 10 11 12

//子類 //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();

這種方式很簡單，只需把父類的執行個體賦值給子類的prototype屬性就行了，然後子類就可以使用父親的方法和屬性了。這裡其實是用到了原型鏈向上尋找的特性，比如這個例子中的 cctest1.parentClassInfo() 方法，JavaScript會先在ChildClassByPrototype的執行個體中尋找是否有parentClassInfo()方法，子類中沒有，所以繼續尋找ChildClassByPrototype.prototype屬性，而其prototype屬性的值是ParentClass的一個執行個體，該執行個體有parentClassInfo()方法，於是尋找結束，調用成功。

二、apply 實現：

?

1 2 3 4 5 6 7 8 9

//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方法，第一個參數為B方法的對象本身，第二個參數為一個數組，該數組內的值為需要傳遞給A方法對應的參數列表，如果參數為空白，即沒有參數傳遞，可通過 new Array()、[] 來傳遞。

三、call + prototype 實現：

?

1 2 3 4 5 6 7 8 9

//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方法，只是傳遞的參數不一樣，call方法的第一個參數為B方法的對象本身，後續的參數則不用Array封裝，需直接依次進行傳遞。既然作用差不多，為何多了一句 原型賦值呢？這是因為call方法只實現了方法的替換而沒有對對象屬性進行複製操作。

每種方法都有其適用環境，比如，如果父類帶有有參建構函式：

?

1 2 3 4 5 6 7 8

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；

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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();

執行個體化：

?

1 2	var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0"); var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

在apply和call中，又該如何取捨呢？在OO的繼承中，子類繼承於父類，那麼它應該也是父類的類型。即，ChildClassByCall、ChildClassByApply應該也是ParentClass類型，但我們用"instanceof"檢測一下就會發現，通過apply繼承的子類，並非ParentClass類型。所以，我們建議用call + prototype 來類比實現繼承。據說，Google Map API 的繼承就是使用這種方式喲。

希望本文所述對大家的javascript程式設計有所協助。