理解JS中的call、apply、bind方法
理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中，call、apply和bind是Function對象自帶的三個方法，這三個方法的主要作用是改變函數中的this指向。
call、apply、bind方法的共同點和區別：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對象
（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 dogAnimal.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 2call 需要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。
既然兩者功能一樣，那該用哪個呢？
在JavaScript 中，某個函數的參數數量是不固定的，因此要說適用條件的話，當你的參數是明確知道數量時用 call ；而不確定的時候用 apply，然後把參數 push 進數組傳遞進去。當參數數量不確定時，函數內部也可以通過 arguments 這個數組來遍歷所有的參數。
三、bindbind是在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| 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("*"));
|
深入理解運用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 則是立即調用 。
理解JS中的call、apply、bind方法