理解JS中的call、apply、bind方法(********************************************************

簡單說事發表於2019-01-03


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

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

一、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複製程式碼
這篇文章實在是很難下筆,因為網上相關文章不勝列舉。
巧合的是前些天看到阮老師的一篇文章的一句話:
“對我來說,部落格首先是一種知識管理工具,其次才是傳播工具。我的技術文章,主要用來整理我還不懂的知識。我只寫那些我還沒有完全掌握的東西,那些我精通的東西,往往沒有動力寫。炫耀從來不是我的動機,好奇才是。"
對於這句話,不能贊同更多,也讓我下決心好好寫這篇,網上文章雖多,大多複製貼上,且晦澀難懂,我希望能夠通過這篇文章,能夠清晰的提升對apply、call、bind的認識,並且列出一些它們的妙用加深記憶。
apply、call
在 javascript 中,call 和 apply 都是為了改變某個函式執行時的上下文(context)而存在的,換句話說,就是為了改變函式體內部 this 的指向。
JavaScript 的一大特點是,函式存在「定義時上下文」和「執行時上下文」以及「上下文是可以改變的」這樣的概念。
先來一個栗子:
1
2
3
4
5
6
7
8
9
10
11
function fruits() {}
fruits.prototype = {
color: "red",
say: function() {
console.log("My color is " + this.color);
}
}
var apple = new fruits;
apple.say(); //My color is red

但是如果我們有一個物件banana= {color : "yellow"} ,我們不想對它重新定義 say 方法,那麼我們可以通過 call 或 apply 用 apple 的 say 方法:

1
2
3
4
5
banana = {
color: "yellow"
}
apple.say.call(banana); //My color is yellow
apple.say.apply(banana); //My color is yellow

所以,可以看出 call 和 apply 是為了動態改變 this 而出現的,當一個 object 沒有某個方法(本栗子中banana沒有say方法),但是其他的有(本栗子中apple有say方法),我們可以藉助call或apply用其它物件的方法來操作。

apply、call 的區別

對於 apply、call 二者而言,作用完全一樣,只是接受引數的方式不太一樣。例如,有一個函式定義如下:

1
2
3
var func = function(arg1, arg2) {
};

就可以通過如下方式來呼叫:

1
2
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

其中 this 是你想指定的上下文,他可以是任何一個 JavaScript 物件(JavaScript 中一切皆物件),call 需要把引數按順序傳遞進去,而 apply 則是把引數放在陣列裡。  

JavaScript 中,某個函式的引數數量是不固定的,因此要說適用條件的話,當你的引數是明確知道數量時用 call 。
而不確定的時候用 apply,然後把引數 push 進陣列傳遞進去。當引數數量不確定時,函式內部也可以通過 arguments 這個陣列來遍歷所有的引數。
為了鞏固加深記憶,下面列舉一些常用用法:
1、陣列之間追加
1
2
3
4
var array1 = [12 , "foo" , {name "Joe"} , -2458];
var array2 = ["Doe" , 555 , 100];
Array.prototype.push.apply(array1, array2);
/* array1 值為 [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

2、獲取陣列中的最大值和最小值

1
2
3
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(Math, numbers), //458
maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

number 本身沒有 max 方法,但是 Math 有,我們就可以藉助 call 或者 apply 使用其方法。

3、驗證是否是陣列(前提是toString()方法沒有被重寫過)

1
2
3
functionisArray(obj){
return Object.prototype.toString.call(obj) === '[object Array]' ;
}

4、類(偽)陣列使用陣列方法

1
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
Javascript中存在一種名為偽陣列的物件結構。比較特別的是 arguments 物件,還有像呼叫 getElementsByTagName , document.childNodes 之類的,它們返回NodeList物件都屬於偽陣列。不能應用 Array下的 push , pop 等方法。
但是我們能通過 Array.prototype.slice.call 轉換為真正的陣列的帶有 length 屬性的物件,這樣 domNodes 就可以應用 Array 下的所有方法了。

深入理解運用apply、call

下面就【借用一道面試題】,來更深入的去理解下 apply 和 call 。

定義一個 log 方法,讓它可以代理 console.log 方法,常見的解決方法是:

1
2
3
4
5
function log(msg) {
console.log(msg);
}
log(1); //1
log(1,2); //1

上面方法可以解決最基本的需求,但是當傳入引數的個數是不確定的時候,上面的方法就失效了,這個時候就可以考慮使用 apply 或者 call,注意這裡傳入多少個引數是不確定的,所以使用apply是最好的,方法如下:

1
2
3
4
5
function log(){
console.log.apply(console, arguments);
};
log(1); //1
log(1,2); //1 2

接下來的要求是給每一個 log 訊息新增一個"(app)"的前輟,比如:

1
log("hello world"); //(app)hello world

該怎麼做比較優雅呢?這個時候需要想到arguments引數是個偽陣列,通過 Array.prototype.slice.call 轉化為標準陣列,再使用陣列方法unshift,像這樣:

1
2
3
4
5
6
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};

bind

說完了 apply 和 call ,再來說說bind。bind() 方法與 apply 和 call 很相似,也是可以改變函式體內 this 的指向。

MDN的解釋是:bind()方法會建立一個新函式,稱為繫結函式,當呼叫這個繫結函式時,繫結函式會以建立它時傳入 bind()方法的第一個引數作為 this,傳入 bind() 方法的第二個以及以後的引數加上繫結函式執行時本身的引數按照順序作為原函式的引數來呼叫原函式。

直接來看看具體如何使用,在常見的單體模式中,通常我們會使用 _this , that , self 等儲存 this ,這樣我們可以在改變了上下文之後繼續引用到它。 像這樣:

1
2
3
4
5
6
7
8
9
10
var foo = {
bar : 1,
eventBind: function(){
var _this = this;
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(_this.bar); //1
});
}
}

由於 Javascript 特有的機制,上下文環境在 eventBind:function(){ } 過渡到 $('.someClass').on('click',function(event) { }) 發生了改變,上述使用變數儲存 this 這些方式都是有用的,也沒有什麼問題。當然使用 bind() 可以更加優雅的解決這個問題:

1
2
3
4
5
6
7
8
9
var foo = {
bar : 1,
eventBind: function(){
$('.someClass').on('click',function(event) {
/* Act on the event */
console.log(this.bar); //1
}.bind(this));
}
}

在上述程式碼裡,bind() 建立了一個函式,當這個click事件繫結在被呼叫的時候,它的 this 關鍵詞會被設定成被傳入的值(這裡指呼叫bind()時傳入的引數)。因此,這裡我們傳入想要的上下文 this(其實就是 foo ),到 bind() 函式中。然後,當回撥函式被執行的時候, this 便指向 foo 物件。再來一個簡單的栗子:

1
2
3
4
5
6
7
8
9
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
bar(); // undefined
var func = bar.bind(foo);
func(); // 3

這裡我們建立了一個新的函式 func,當使用 bind() 建立一個繫結函式之後,它被執行的時候,它的 this 會被設定成 foo , 而不是像我們呼叫 bar() 時的全域性作用域。

有個有趣的問題,如果連續 bind() 兩次,亦或者是連續 bind() 三次那麼輸出的值是什麼呢?像這樣:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var bar = function(){
console.log(this.x);
}
var foo = {
x:3
}
var sed = {
x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
var fiv = {
x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是,兩次都仍將輸出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是無效的。更深層次的原因, bind() 的實現,相當於使用函式在內部包了一個 call / apply ,第二次 bind() 相當於再包住第一次 bind() ,故第二次以後的 bind 是無法生效的。

  

apply、call、bind比較

那麼 apply、call、bind 三者相比較,之間又有什麼異同呢?何時使用 apply、call,何時使用 bind 呢。簡單的一個栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
var obj = {
x: 81,
};
var foo = {
getX: function() {
return this.x;
}
}
console.log(foo.getX.bind(obj)()); //81
console.log(foo.getX.call(obj)); //81
console.log(foo.getX.apply(obj)); //81

三個輸出的都是81,但是注意看使用 bind() 方法的,他後面多了對括號。

也就是說,區別是,當你希望改變上下文環境之後並非立即執行,而是回撥執行的時候,使用 bind() 方法。而 apply/call 則會立即執行函式。

再總結一下:

  • apply 、 call 、bind 三者都是用來改變函式的this物件的指向的;
  • apply 、 call 、bind 三者第一個引數都是this要指向的物件,也就是想指定的上下文;
  • apply 、 call 、bind 三者都可以利用後續引數傳參;
  • bind 是返回對應函式,便於稍後呼叫;apply 、call 則是立即呼叫 。

本文轉自:http://www.cnblogs.com/coco1s/p/4833199.html

相關文章