DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 理解JS中的call、apply、bind方法
理解JS中的call、apply、bind方法
編輯:JavaScript基礎知識     

在JavaScript中,callapplybindFunction對象自帶的三個方法,這三個方法的主要作用是改變函數中的this指向。

callapplybind方法的共同點和區別:
apply 、 call 、bind 三者都是用來改變函數的this對象的指向的;
apply 、 call 、bind 三者第一個參數都是this要指向的對象,也就是想指定的上下文(函數的每次調用都會擁有一個特殊值——本次調用的上下文(context)——這就是this關鍵字的值。);
apply 、 call 、bind 三者都可以利用後續參數傳參;
bind 是返回對應函數,便於稍後調用;apply 、call 則是立即調用 。

一、call

call()
語法:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定義:調用一個對象的一個方法,以另一個對象替換當前對象。

說明: call 方法可以用來代替另一個對象調用一個方法。
call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

thisObj的取值有以下4種情況:
(1) 不傳,或者傳null,undefined, 函數中的this指向window對象
(2) 傳遞另一個函數的函數名,函數中的this指向這個函數的引用
(3) 傳遞字符串、數值或布爾類型等基礎類型,函數中的this指向其對應的包裝對象,如 String、Number、Boolean
(4) 傳遞一個對象,函數中的this指向這個對象

function a(){   
  console.log(this);   //輸出函數a中的this對象
}       

function b(){}       

var c={name:"call"};    //定義對象c  

a.call();   //window
a.call(null);   //window
a.call(undefined);   //window
a.call(1);   //Number
a.call('');   //String
a.call(true);   //Boolean
a.call(b);   //function b(){}
a.call(c);   //Object

如果你不理解上面的,沒關系,我們再來看一個例子:

function class1(){   
  this.name=function(){   
    console.log("我是class1內的方法");   
  }   
}   
function class2(){ 
  class1.call(this);  //此行代碼執行後,當前的this指向了class1(也可以說class2繼承了class1)   
}   

var f=new class2();   
f.name();   //調用的是class1內的方法,將class1的name方法交給class2使用

常用例子:
(1)

function eat(x,y){   
  console.log(x+y);   
}   
function drink(x,y){   
  console.log(x-y);   
}   
eat.call(drink,3,2);

輸出:5

這個例子中的意思就是用 eat 來替換 drink,eat.call(drink,3,2) == eat(3,2) ,所以運行結果為:console.log(5);
注意:js 中的函數其實是對象,函數名是對 Function 對象的引用。

(2)

function Animal(){   
  this.name="animal";   
  this.showName=function(){   
    console.log(this.name);   
  }   
}   
function Dog(){   
  this.name="dog";   
}   
var animal=new Animal();   
var dog=new Dog();       

animal.showName.call(dog);

輸出:dog

在上面的代碼中,我們可以看到Dog裡並沒有showName方法,那為什麼(this.name)的值是dog呢?

關鍵就在於最後一段代碼(animal.showName.call(dog)),意思是把animal的方法放到dog上執行,也可以說,把animal 的showName()方法放到 dog上來執行,所以this.name 應該是 dog。

(3)繼承

function Animal(name){   
  this.name=name;   
  this.showName=function(){   
    console.log(this.name);   
  }   
}   
function Dog(name){   
  Animal.call(this,name);   
}   
var dog=new Dog("Crazy dog");   
dog.showName();

輸出:Crazy dog

Animal.call(this) 的意思就是使用 Animal對象代替this對象,那麼Dog就能直接調用Animal的所有屬性和方法。

二、apply()

語法:apply([thisObj[,argArray]])

定義:應用某一對象的一個方法,用另一個對象替換當前對象。

說明:
如果 argArray 不是一個有效的數組或者不是 arguments 對象,那麼將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數,那麼 Global 對象將被用作 thisObj, 並且無法被傳遞任何參數。

call 和 apply的區別
對於 apply、call 二者而言,作用完全一樣,只是接受參數的方式不太一樣。

function class1(args1,args2){       
  this.name=function(){      
   console.log(args,args);      
  }     
}     
function class2(){    
  var args1="1";
  var args2="2";
  class1.call(this,args1,args2);  
  /*或*/
  class1.apply(this,[args1,args2]);
}

var c=new class2();   
c.name();

輸出:1 2

call 需要把參數按順序傳遞進去,而 apply 則是把參數放在數組裡。

既然兩者功能一樣,那該用哪個呢?

在JavaScript 中,某個函數的參數數量是不固定的,因此要說適用條件的話,當你的參數是明確知道數量時用 call ;而不確定的時候用 apply,然後把參數 push 進數組傳遞進去。當參數數量不確定時,函數內部也可以通過 arguments 這個數組來遍歷所有的參數。

三、bind
bind是在EcmaScript5中擴展的方法(IE6,7,8不支持)
bind() 方法與 apply 和 call 很相似,也是可以改變函數體內 this 的指向。

  MDN的解釋是:bind()方法會創建一個新函數,稱為綁定函數,當調用這個綁定函數時,綁定函數會以創建它時傳入 bind()方法的第一個參數作為 this,傳入 bind() 方法的第二個以及以後的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

注意:bind方法的返回值是函數

var bar=function(){   
  console.log(this.x);   
}
var foo={ 
     x:3   
}   
bar();  
bar.bind(foo)();
 /*或*/
var func=bar.bind(foo);   
func();

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