JavaScript模擬實作繼承的方法_javascript技巧-js教程-PHP中文網

JavaScript模擬實作繼承的方法_javascript技巧

WBOY

發布： 2016-05-16 16:06:56

原創

1205 人瀏覽過

本文實例講述了JavaScript模擬實作繼承的方法。分享給大家供大家參考。具體分析如下：

我們都知道，在JavaScript中只能模擬實作OO中的"類別"，也意味著，在JavaScript中沒有類別的繼承。我們也只能透過在原始物件裡新增或改寫屬性來模擬實現。

先定義一個父類，

//父类
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、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 實作：

//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 實作：

//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方法只實作了方法的替換而沒有對物件屬性進行複製操作。

每種方法都有其適用環境，例如，如果父類別帶有有參構造函數：

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

登入後複製

實例化：

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程式設計有所幫助。