Javascript中call，apply，bind方法的詳解與總結

時間 2019-11-12

標籤 javascript apply bind 方法詳解總結欄目 JavaScript 简体版

原文原文鏈接

在 javascript之 this 關鍵字詳解文章中，談及了以下內容，作一個簡單的回顧：javascript

1.this對象的涵義就是指向當前對象中的屬性和方法。html

2.this指向的可變性。當在全局做用域時，this指向全局；當在某個對象中使用this時，this指向該對象；當把某個對象的方法賦值給另一個對象時，this會指向後一個對象。java

3.this的使用場合有：在全局環境中使用；在構造函數中使用，在對象的方法中使用。數組

4.this的使用注意點，最重要的一點就是要避免多層嵌套使用this對象。閉包

對this關鍵字有了稍稍瞭解便知道，this對象指向會常常改變的，這會形成一些意想不到的影響。JavaScript提供了call、apply、bind這三個方法，來切換/固定this的指向。app

如下內容會分爲以下小節：函數

1.call/apply/bind方法的來源post

2.Function.prototype.call()this

3.Function.prototype.apply()spa

　　3.1：找出數組中的最大數

　　3.2：將數組的空元素變爲undefined

　　3.3：轉換相似數組的對象

4.Function.prototype.bind()

5.綁定回調函數的對象

6.call，apply，bind方法的聯繫和區別

1.call/apply/bind方法的來源

　　首先，在使用call，apply，bind方法時，咱們有必要知道這三個方法到底是來自哪裏？爲何可使用的到這三個方法？

　　call，apply，bind這三個方法其實都是繼承自Function.prototype中的，屬於實例方法。

1     console.log(Function.prototype.hasOwnProperty('call')) //true
2     console.log(Function.prototype.hasOwnProperty('apply')) //true
3     console.log(Function.prototype.hasOwnProperty('bind')) //true

　　上面代碼中，都返回了true，代表三種方法都是繼承自Function.prototype的。固然，普通的對象，函數，數組都繼承了Function.prototype對象中的三個方法，因此這三個方法均可以在對象，數組，函數中使用。

　　關於繼承的概念，會在之後與你們分享。

2.Function.prototype.call()

　　函數實例的call方法，能夠指定該函數內部this的指向（即函數執行時所在的做用域），而後在所指定的做用域中，調用該函數。而且會當即執行該函數。

　　看個例子來好好理解這段話。

 1     var keith = {
 2         rascal: 123
 3     };
 4 
 5     var rascal = 456;
 6 
 7     function a() {
 8         console.log(this.rascal);
 9     }
10 
11     a(); //456
12     a.call(); //456
13     a.call(null); //456
14     a.call(undefined); //456
15     a.call(this); //456
16     a.call(keith); //123

　　上面代碼中，a函數中的this關鍵字，若是指向全局對象，返回結果爲456。能夠看到，若是call方法沒有參數，或者參數爲null或undefined或者this，則等同於指向全局對象。若是使用call方法將this關鍵字指向keith對象，也就是將該函數執行時所在的做用域爲keith對象，返回結果爲123。

　　call()方法能夠傳遞兩個參數。第一個參數是指定函數內部中this的指向（也就是函數執行時所在的做用域），第二個參數是函數調用時須要傳遞的參數。

1     function keith(a, b) {
2         console.log(a + b);
3     }
4 
5     keith.call(null, 1, 2); //3

　　第一個參數是必須的，能夠是null，undefined，this，可是不能爲空。設置爲null，undefined，this代表函數keith此時處於全局做用域。第二個參數中必須一個個添加。而在apply中必須以數組的形式添加。

　　call方法的一個應用是調用對象的原生方法。也能夠用於將類數組對象轉換爲數組。

 1     var obj = {};
 2     console.log(obj.hasOwnProperty('toString')); //false
 3 
 4     obj.hasOwnProperty = function() {
 5         return true;
 6     }
 7 
 8     console.log(obj.hasOwnProperty('toString')); //true
 9 
10     console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false

　　上面代碼中，hasOwnProperty是obj對象繼承的方法，若是這個方法一旦被覆蓋，就不會獲得正確結果。call方法能夠解決這個方法，它將hasOwnProperty方法的原始定義放到obj對象上執行，這樣不管obj上有沒有同名方法，都不會影響結果。要注意的是，hasOwnProperty是Object.prototype原生對象的方法，而call是繼承自Function.prototype的方法。

3.Function.prototype.apply()

　　apply方法的做用與call方法相似，也是改變this指向（函數執行時所在的做用域），而後在指定的做用域中，調用該函數。同時也會當即執行該函數。惟一的區別就是，它接收一個數組做爲函數執行時的參數。

　　apply方法的第一個參數也是this所要指向的那個對象，若是設爲null或undefined或者this，則等同於指定全局對象。第二個參數則是一個數組，該數組的全部成員依次做爲參數，在調用時傳入原函數。原函數的參數，在call方法中必須一個個添加，可是在apply方法中，必須以數組形式添加。

　　看一下call，apply的細微差異。

1     function keith(a, b) {
2         console.log(a + b);
3     }
4 
5     keith.call(null, 2, 3); //5
6     keith.apply(null, [2, 3]); //5

　　上面代碼中，第一個參數爲null，指向全局做用域；第二個參數傳入的形式稍稍不一樣。

　　apply方法有如下應用。

　　3.1：找出數組中的最大數

1     var a = [2, 4, 5, 7, 8, 10];
2 
3     console.log(Math.max.apply(null, a)); //10
4     console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10

　　Javascript中是沒有提供找出數組中最大值的方法的，結合使用繼承自Function.prototype的apply和Math.max方法，就能夠返回數組的最大值。

　　3.2：將數組的空元素變爲undefined

　　經過apply方法，利用Array構造函數將數組的空元素變成undefined。

1 console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]

　　空元素與undefined的差異在於，數組的forEach方法會跳過空元素，可是不會跳過undefined和null。所以，遍歷內部元素的時候，會獲得不一樣的結果。

    var a = [1, , 3];
    a.forEach(function(index) {
        console.log(index); //1,3 ，跳過了空元素。
    })

    Array.apply(null,a).forEach(function(index){
        console.log(index);    ////1,undefined,3  ，將空元素設置爲undefined
    })

　　3.3：轉換相似數組的對象

　　另外，利用數組對象的slice方法，能夠將一個相似數組的對象（好比arguments對象）轉爲真正的數組。固然，slice方法的一個重要應用，就是將相似數組的對象轉爲真正的數組。call和apply均可以實現該應用。

1     console.log(Array.prototype.slice.apply({0:1,length:1}));    //[1]
2     console.log(Array.prototype.slice.call({0:1,length:1}));    //[1]
3     console.log(Array.prototype.slice.apply({0:1,length:2}));    //[1,undefined]
4     console.log(Array.prototype.slice.call({0:1,length:2}));    //[1,undefined]

1     function keith(a,b,c){
2         return arguments;
3     }
4 
5     console.log(Array.prototype.slice.call(keith(2,3,4)));    //[2,3,4]

　　上面代碼的call，apply方法的參數都是對象，可是返回結果都是數組，這就起到了將對象轉成數組的目的。從上面代碼能夠看到，這個方法起做用的前提是，被處理的對象必須有length屬性，以及相對應的數字鍵。

4.Function.prototype.bind()

　　bind方法用於指定函數內部的this指向（執行時所在的做用域），而後返回一個新函數。bind方法並不是當即執行一個函數。

 1     var keith = {
 2         a: 1,
 3         count: function() {
 4             console.log(this.a++);
 5         }
 6     };
 7 
 8     keith.count(); //1
 9     keith.count(); //2
10     keith.count(); //3

　　上面代碼中，若是this.a指向keith對象內部的a屬性，若是這個方法賦值給另一個變量，調用時就會出錯。

1     var keith = {
2         a: 1,
3         count: function() {
4             console.log(this.a++);
5         }
6     };
7 
8     var f = keith.count;
9     f(); //NaN

　　上面代碼中，若是把count方法賦值給f變量，那麼this對象指向再也不是keith對象了，而是window對象。而window.a默認爲undefined，進行遞增運算以後undefined++就等於NaN。

　　爲了解決這個問題，可使用bind方法，將keith對象裏的this綁定到keith對象上，或者是直接調用。

1     var f = keith.count.bind(keith);
2     f(); //1
3     f(); //2
4     f(); //3

1     keith.count.bind(keith)() //1
2     keith.count.bind(keith)() //2
3     keith.count.bind(keith)() //3

　　固然，this也能夠綁定到其餘對象上。

1     var obj = {
2         a: 100
3     };
4     var f = keith.count.bind(obj);
5     f(); //100
6     f(); //101
7     f(); //102

　　一樣，咱們也能夠給bind方法傳遞參數，第一個參數若是爲null或者undefined或者this，會將函數內部的this對象指向全局環境；第二個爲調用時須要的參數，而且傳遞參數的形式與call方法相同。

1     function keith(a, b) {
2         return a + b;
3     }
4     console.log(keith.apply(null,[1,4])); //5
5     console.log(keith.call(null,1,4)); //5
6     console.log(keith.bind(null, 1, 4)); //keith()
7     console.log(keith.bind(null, 1, 4)()); //5

　　上面代碼中，能夠看出call，apply，bind三者的區別：call和apply方法都是在調用以後當即執行的。而bind調用以後是返回原函數，須要再調用一次才行，有點像閉包的味道，若是對閉包概念不熟悉，能夠瀏覽這兩篇文章：javascript--函數參數與閉包--詳解，javascript中重要概念-閉包-深刻理解。

5.綁定回調函數的對象

　　在這篇文章javascript之 this 關鍵字詳解中，有談及到若是在回掉函數中使用this對象，那麼this對象是會指向DOM對象，也就是button對象。若是要解決回調函數中this指向問題，能夠用以下方法。

 1     var o = {
 2         f: function() {
 3             console.log(this === o);
 4         }
 5     }
 6 
 7     $('#button').on('click', function() {
 8         o.f.apply(o);
 9         //或者 o.f.call(o);
10         //或者 o.f.bind(o)();
11     });