DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 基於JavaScript實現繼承機制之調用call()與apply()的方法詳解
基於JavaScript實現繼承機制之調用call()與apply()的方法詳解
編輯:JavaScript基礎知識     

call() 方法

call() 方法是與經典的對象冒充方法最相似的方法。它的第一個參數用作 this 的對象。其他參數都直接傳遞給函數自身。例如:
復制代碼 代碼如下:
function sayHello(sPrefix,sSuffix) {
    alert(this.name + ”says“ + sPrefix + sSuffix);
};

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

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

在這個例子中,函數 sayHello() 在對象外定義,即使它不屬於任何對象,也可以引用關鍵字 this。對象 obj 的 name屬性等於 blue。調用 call() 方法時,第一個參數是 obj,說明應該賦予 sayHello() 函數中的 this 關鍵字值是 obj。第二個和第三個參數是字符串。它們與 sayHello() 函數中的參數 sPrefix 和 sSuffix 匹配,最後生成的消息 "Tom says Hello World." 將被顯示出來。

要與繼承機制的對象冒充方法一起使用該方法,只需將前三行的賦值、調用和刪除代碼替換即可:
復制代碼 代碼如下:
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 中的關鍵字 this 等於新創建的 ClassB 對象,因此 this 是第一個參數。第二個參數 sColor 對兩個類來說都是唯一的參數。

apply() 方法

apply() 方法有兩個參數,用作 this 的對象和要傳遞給函數的參數的數組。例如:
復制代碼 代碼如下:
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."));

這個例子與前面的例子相同,只是現在調用的是 apply() 方法。調用 apply() 方法時,第一個參數仍是 obj,說明應該賦予 sayColor() 函數中的 this 關鍵字值是 obj。第二個參數是由兩個字符串構成的數組,與 sayColor() 函數中的參數 sPrefix 和 sSuffix 匹配,最後生成的消息仍是 "The color is blue, a very nice color indeed.",將被顯示出來。

該方法也用於替換前三行的賦值、調用和刪除新方法的代碼:
復制代碼 代碼如下:
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);
    };
}

同樣的,第一個參數仍是 this,第二個參數是只有一個值 color 的數組。可以把 ClassB 的整個 arguments 對象作為第二個參數傳遞給 apply() 方法:
復制代碼 代碼如下:
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);
    };
}

當然,只有超類中的參數順序與子類中的參數順序完全一致時才可以傳遞參數對象。如果不是,就必須創建一個單獨的數組,按照正確的順序放置參數。此外,還可使用 call() 方法。

我們可以看到這兩個方法能夠很好的代替原始的對象冒充,使寫法上變得稍微簡單。但是這些方法的弊端是子類不能繼承父類在原型鏈上聲明的方法或屬性,針對這個問題下一篇文章將會介紹JavaScript中另一種實現繼承的方式—原型鏈繼承。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved