基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解

更新時(shí)間：2013年05月07日 18:06:27 作者：

本文將介紹兩種很類似于對(duì)象冒充的繼承方式，即使用call()和apply()方法

call() 方法

call() 方法是與經(jīng)典的對(duì)象冒充方法最相似的方法。它的第一個(gè)參數(shù)用作 this 的對(duì)象。其他參數(shù)都直接傳遞給函數(shù)自身。例如：

復(fù)制代碼代碼如下:

function sayHello(sPrefix,sSuffix) {
alert(this.name + ”says“ + sPrefix + sSuffix);
};

var obj = new Object();
obj.name = "Tom";

sayHello.call(obj, "Hello ", "World.");

在這個(gè)例子中，函數(shù) sayHello() 在對(duì)象外定義，即使它不屬于任何對(duì)象，也可以引用關(guān)鍵字 this。對(duì)象 obj 的 name屬性等于 blue。調(diào)用 call() 方法時(shí)，第一個(gè)參數(shù)是 obj，說(shuō)明應(yīng)該賦予 sayHello() 函數(shù)中的 this 關(guān)鍵字值是 obj。第二個(gè)和第三個(gè)參數(shù)是字符串。它們與 sayHello() 函數(shù)中的參數(shù) sPrefix 和 sSuffix 匹配，最后生成的消息 "Tom says Hello World." 將被顯示出來(lái)。

要與繼承機(jī)制的對(duì)象冒充方法一起使用該方法，只需將前三行的賦值、調(diào)用和刪除代碼替換即可：

復(fù)制代碼代碼如下:

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.call(this, sColor);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

這里，我們需要讓 ClassA 中的關(guān)鍵字 this 等于新創(chuàng)建的 ClassB 對(duì)象，因此 this 是第一個(gè)參數(shù)。第二個(gè)參數(shù) sColor 對(duì)兩個(gè)類來(lái)說(shuō)都是唯一的參數(shù)。

apply() 方法

apply() 方法有兩個(gè)參數(shù)，用作 this 的對(duì)象和要傳遞給函數(shù)的參數(shù)的數(shù)組。例如：

復(fù)制代碼代碼如下:

function sayColor(sPrefix,sSuffix) {
alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

這個(gè)例子與前面的例子相同，只是現(xiàn)在調(diào)用的是 apply() 方法。調(diào)用 apply() 方法時(shí)，第一個(gè)參數(shù)仍是 obj，說(shuō)明應(yīng)該賦予 sayColor() 函數(shù)中的 this 關(guān)鍵字值是 obj。第二個(gè)參數(shù)是由兩個(gè)字符串構(gòu)成的數(shù)組，與 sayColor() 函數(shù)中的參數(shù) sPrefix 和 sSuffix 匹配，最后生成的消息仍是 "The color is blue, a very nice color indeed."，將被顯示出來(lái)。

該方法也用于替換前三行的賦值、調(diào)用和刪除新方法的代碼：

復(fù)制代碼代碼如下:

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, new Array(sColor));

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

同樣的，第一個(gè)參數(shù)仍是 this，第二個(gè)參數(shù)是只有一個(gè)值 color 的數(shù)組?？梢园?ClassB 的整個(gè) arguments 對(duì)象作為第二個(gè)參數(shù)傳遞給 apply() 方法：

復(fù)制代碼代碼如下:

function ClassB(sColor, sName) {
    //this.newMethod = ClassA;
    //this.newMethod(color);
    //delete this.newMethod;
    ClassA.apply(this, arguments);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

當(dāng)然，只有超類中的參數(shù)順序與子類中的參數(shù)順序完全一致時(shí)才可以傳遞參數(shù)對(duì)象。如果不是，就必須創(chuàng)建一個(gè)單獨(dú)的數(shù)組，按照正確的順序放置參數(shù)。此外，還可使用 call() 方法。

我們可以看到這兩個(gè)方法能夠很好的代替原始的對(duì)象冒充，使寫法上變得稍微簡(jiǎn)單。但是這些方法的弊端是子類不能繼承父類在原型鏈上聲明的方法或?qū)傩裕槍?duì)這個(gè)問(wèn)題下一篇文章將會(huì)介紹JavaScript中另一種實(shí)現(xiàn)繼承的方式—原型鏈繼承。

您可能感興趣的文章: