Javascript中的call()方法介紹_javascript技巧

在Mozilla的官網中對於call()的介紹是:

複製程式碼 程式碼如下:

call() 方法在使用一個指定的this值和若干個指定的參數值的前提下呼叫某個函數或方法.

Call() 語法

複製程式碼 程式碼如下:

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() 參數

thisArg

複製程式碼 程式碼如下:

在fun函數運行時指定的this值。需要注意的是，指定的this值不一定是該函數執行時真正的this值，如果這個函數處於非嚴格模式下，則指定為null和undefined的this值會自動指向全域物件(瀏覽器中就是window物件)，同時值為原始值(數字，字串，布林值)的this會指向該原始值的自動包裝物件。

arg1, arg2, ...

複製程式碼 程式碼如下:

指定的參數列表。

Javascript中的call()方法

先不專注於上面那些複雜的解釋，一步一步地開始這個過程。

Call()方法的實例

於是寫了另外一個Hello,World:

複製程式碼 程式碼如下:

function print(p1, p2) {
    console.log( p1 ' ' p2);
}
print("Hello", "World");
print.call(undefined, "Hello", "World");

兩種方式有相同的輸出結果，然而，相較之下call法也傳進了一個undefined。

接著，我們再來看另外一個例子。

複製程式碼 程式碼如下:

var obj=function(){};
function print(p1, p2) {
    console.log( p1 ' ' p2);
}

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

只是在這裡，我們傳進去的還是一個undefined，因為上一個例子中的undefined是因為需要傳進一個參數。這裡並沒有真正體現call的用法，看看一個更好的例子。

複製程式碼 程式碼如下:

function print(name) {
    console.log( this.p1 ' ' this.p2);
}

var h={p1:"hello", p2:"world", print:print};
h.print("fd");

var h2={p1:"hello", p2:"world"};
print.call(h2, "nothing");

call就用就是藉用別人的方法、物件來調用，就像調用自己的一樣。在h.print，當將函數作為方法呼叫時，this將指向相關的物件。只是這個例子我們沒有看明白，到底是h2調了print，還是print呼叫了h2。於是引用了Mozilla的例子

複製程式碼 程式碼如下:

function Product(name, price) {
    this.name = name;
    this.price = price;

    if (price         throw RangeError('Cannot create product "' name '" with a negative price');
    return this;
}

function Food(name, price) {
    Product.call(this, name, price);
    this.category = 'food';
}
Food.prototype = new Product();

var cheese = new Food('feta', 5);
console.log(cheese);

在這裡我們可以真正看明白，到底是哪個物件呼叫了哪個方法。在範例中，使用Food建構函數建立的物件實例都會擁有在Product建構函數中新增的 name 屬性和 price 屬性,但 category 屬性是在各自的建構子中定義的。

複製程式碼 程式碼如下:

function print(name) {
    console.log( this.p1 ' ' this.p2);
}

var h2= function(no){
    this.p1 = "hello";
    this.p2 = "world";
    print.call(this, "nothing");
};
h2();

這裡的h2作為一個接收者來呼叫函數print。如同在Food範例中，在一個子建構函式中，你可以透過呼叫父建構函式的 call 方法來實現繼承。

至於Call方法優點，在《Effective JavaScript》中有介紹。

1.使用call方法自訂接收者來呼叫函數。
2.使用call方法可以呼叫在給定的物件中不存在的方法。
3.使用call方法可以定義高階函數允許使用者給回呼函數指定接收者。