javascript的apply和call方法的使用詳解

標籤：

一直對javascript的apply和call方法的使用比較模糊，前段時間在研究angularjs的原始碼時，發現這兩個方法非常的強大，使用的情境非常多，這裡做個總結。

apply和call都是對某個方法的應用，區別在於apply有兩個參數：apply(obj,args)，其中obj為方法應用的對象，args為參數數組；call有多個參數，call(obj,arg1,arg2,arg3......)，obj和apply的obj一樣，而參數則是用逗號隔開，有多少個參數就傳多少個。下面以apply為例，需要注意的是apply的第二個參數必須為數組，否則會報錯。

 

1.obj為null、undefined、bool值、0、this、window等的時候，相當於調用方法自身。

function test(arg) {
console.log(arg);
}

分別調用test.apply(null,[1,2,3])，test.apply(undefined,[1,2,3])，test.apply(false,[1,2,3])，test.apply(true,[1,2,3])，

test.apply(0，[1,2,3])，test.apply(this,[1,2,3]);

輸出結果都為1。

ps:test函數只有一個參數，所以即使傳入的數組參數多於一個，也只會取第一個，其它的被忽略。

 

2.obj為不存在的對象時，會報錯。仍然以上一個函數為例。

調用test.apply(ffff,[1,2,3])，則直接報錯。

輸出：Uncaught ReferenceError: ffff is not defined。

 

3.obj為函數時，如XXX.apply(obj,args)，意為調用XXX函數。

function test1(arg) {
console.log("test1 " + arg);
}

function test2(arg1, arg2) {
console.log(arg1 + " " + arg2);
}

 

 

調用test1.apply(test2, [1, 2, 3]);

 

輸出：test1 1。

 

可以看見，其實就是將參數傳給test1然後調用test1。

 

4.當obj為對象時，obj對象會替代XXX.apply中的XXX函數的this，將this所擁有的屬性變成obj對象自己的屬性。

 

例1：

function Test1() {
console.log("test1 ");

this.a = 1;
this.b = 2;

}

var c ={};

Test1.apply(c, []);

 

此時的c對象為{a:1,b:2}。

 

例2：

function Test1() {
console.log("test1 ");

this.a = 1;
this.b = 2;
}

Test1.prototype = {c: 3, d: 4};

var c = Test1.prototype;
Test1.apply(c, []);

 

此時的c對象為{a:1,b:2,c:3,d:4}。

 

另外，如果函數有傳回值，給apply的結果賦一個變數即可獲得。

function test1() {
console.log("test1");

return function () {
console.log("return function");
}
}

var back = test1.apply(null, []);
back();

輸出：return function。

 

目前對apply的瞭解就這麼多，call的調用類似，只需要把數組換成逗號分隔的單個參數即可。如果各位有其它使用方式或者發現問題，煩請指正賜教。

javascript的apply和call方法的使用詳解