詳解js中call與apply關鍵字的作用

javascript call與apply關鍵字的作用

apply接受兩個參數。第一個參數指定函數體內this物件的指向，第二個參數為一個帶有下標的集合。

call則是apply的語法糖，如果參數數量固定，則可以不用帶下標的集合傳第二個參數。

var func = function(a,b,c)
{
 alert(a + b + c);
}
func.apply(null,[1,2,3]);//弹出6
func.call(null,1,2,3);//弹出6

   

當apply與call傳入的第一個參數為null時，函數體內的this會指向window。

當apply與call傳入的第一個參數為null時，函數體內的this會指向window。

call與apply的用途

1、改變this的指向

var obj1 = {
 name = '刘备'
}
  
var obj2 = {
 name = '曹操'
}
var getName = function(){
 alert(this.name);
}
  
window.name = '三国';
getName();//弹出"三国"
getName.call(obj1);//弹出"刘备"
getName.call(obj2);//弹出"曹操"

   

所以，當在某些情況下this被莫名改變指向之後，可以使用thiscall或apply來進行修正的apply。

document.getElementById('div1').onclick = function(){
 alert(this.id);//div1
 var fun1 = function(){
  alert(this.id);//window.id 即undefined
 }
 fun1();//普通函数的方式调用，this指代window,相当于window.id 即 undefined
}

   

由於是普通函數的方式調用，所以上面的例子中，this已經變成了window。下面來看看如何使用call進行修正。

document.getElementById('div1').onclick = function(){
 alert(this.id);
 var fun1 = function(){
  alert(this.id);
 }
 fun1.call(this);//强制函数内的this为外层的this，
}

   

2、呼叫其他物件的函數

範例1：

var obj1 = {
 a:1,
 b:2,
 add:function()
 {
  return this.a + this.b;
 }
}
var obj2 = {
 a:1,
 b:2,
}
var result = obj1.add.call(obj2);//用obj1的函数来计算obj2的两个属性的和
alert(result);//输出3

   

rr