摘要：關(guān)于的指向的問(wèn)題請(qǐng)參照我的學(xué)習(xí)筆記。那么在這里事實(shí)上都改變了函數(shù)方法被調(diào)用時(shí)的指向。那么回調(diào)函數(shù)在執(zhí)行的時(shí)候指向還是。大家看完之后應(yīng)該已經(jīng)懂了把還是不懂的話(huà)在評(píng)論區(qū)留言，我給大家解答。

先從一個(gè)小題目開(kāi)始吧：

要實(shí)現(xiàn)一個(gè)加法函數(shù)，這個(gè)時(shí)候向函數(shù)當(dāng)中傳遞個(gè)數(shù)大于0的若干個(gè)整形數(shù)據(jù)，求所有這些數(shù)據(jù)的和。

Function.prototype.call

Function.prototype.apply

Function.prototype.bind

其中call方法:

    var personA = {
        name: "XL",
        sayName: function (hobby){
            console.log(this.name + " likes " + hobby);
        } 
    };
    
    personA.sayName("basketball");   // "XL likes basketball"
    
    var personB = {
        name: "xl"
    }
    
    personA.sayName.call(personB, "basketball");  // "xl likes basketball"
    personA.sayName.apply(personB, ["basketball"]); // "xl likes basketball"
    
    

call和apply的區(qū)別就在于傳遞方式的不同，call在接收指定參數(shù)的形式是someMethod.call(obj, arg1, arg2);而apply在接收指定參數(shù)時(shí)的形式是someMethod.apply(obj, [arg1, arg2]).或者someMethod.apply(obj, arg1),但是這個(gè)arg1必須是一個(gè)類(lèi)數(shù)組對(duì)象

其實(shí)想要真正掌握call/apply包括bind方法，首先必須搞清楚當(dāng)一個(gè)函數(shù)/方法被調(diào)用的時(shí)候this的指向問(wèn)題。 關(guān)于this的指向的問(wèn)題請(qǐng)參照我的學(xué)習(xí)筆記。

那么在這里call,apply,bind事實(shí)上都改變了函數(shù)/方法被調(diào)用時(shí)this的指向。

還是拿上面的例子來(lái)說(shuō)：

    personA.sayName(‘basketball’); //調(diào)用sayName()這個(gè)方法的對(duì)象是personA,因此sayName()內(nèi)部的this指向就是personA對(duì)象

換一種寫(xiě)法

    var sayName = personA.sayName("basketball");
    //這里將sayName方法掛載到了window對(duì)象上，即window.sayName = person.sayName();  這個(gè)時(shí)候調(diào)用sayName().此時(shí)this指向就是window對(duì)象

使用call/apply

    personA.sayName.call(personB, "basketball");
    //本來(lái)sayName方法的this指向是personA對(duì)象，但是調(diào)用call后，this對(duì)象指向了personB對(duì)象。

如果大家這種寫(xiě)法看不習(xí)慣，那就換種方式來(lái)看:

    personA.sayName.call(personB, "basketball") ===> personB.sayName("basketball");
    //從前面的一個(gè)形式變?yōu)楹竺嬉环N形式，此時(shí),sayName方法的this指向是personB對(duì)象了。

換一種方式書(shū)寫(xiě)后大家應(yīng)該看的很清晰明了了吧？以后碰到call/apply調(diào)用的時(shí)候，換一種形式去理解，這樣就很清晰了。

再比如大家經(jīng)?？吹降囊环N對(duì)于函數(shù)的arguments類(lèi)數(shù)組對(duì)象的處理方式：

    function fn() {
        var args = Array.prototype.slice.apply(arguments); //這里將arguments這個(gè)類(lèi)數(shù)組對(duì)象轉(zhuǎn)化為一個(gè)數(shù)組 
    }
    
    //咱們?cè)賮?lái)轉(zhuǎn)化下:
Array.prototype.slice.apply(arguments); ===>>> arguments.slice(); 
//因?yàn)閍rguments是類(lèi)數(shù)組對(duì)象的原因，因此它可以直接調(diào)用slice方法;如果要截取數(shù)組的從第幾位到第幾位的數(shù)

Array.prototype.slice.apply(arguments, [0, 2]); ===>>> arguments.slice(0, 2);

握草，感覺(jué)編不下去了- -

其實(shí)將call/apply,換一種形式去看，是不是就和普通的方法調(diào)用一樣一樣的。

bind方法呢，起的作用和call,apply一樣，都是改變函數(shù)/方法執(zhí)行時(shí),this的指向，確保這個(gè)函數(shù)/方法運(yùn)行時(shí)this指向保持一致。
比如大家經(jīng)常用到的setTimeout異步函數(shù)：

    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }, 0);
        }
    }
    
    person.sayName();   //最后輸出： undefined

這是因?yàn)?b>setTimeout()這個(gè)異步函數(shù)調(diào)用的時(shí)候，內(nèi)部的回調(diào)函數(shù)this的指向是window.但是在window對(duì)象上并未掛載name屬性，因此最后輸出undefined.

添加一行代碼

    var name = "XLLLL";
    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }, 0);
        }
    }
    
    person.sayName();   //輸出  ‘XLLLL’

為了避免在回調(diào)函數(shù)當(dāng)中,this指向發(fā)生變化，所以大家都會(huì)這樣處理：

    var person = {
        name: "XL",
        sayName: function() {
            setTimeout(function() {
                console.log(this.name);
            }.bind(this), 0);   //通過(guò)bind方法將this對(duì)象綁定為person。那么回調(diào)函數(shù)在執(zhí)行的時(shí)候,this指向還是person。
        }
    }

可以用下面這段代碼來(lái)簡(jiǎn)單模擬下bind方法內(nèi)部的操作:

    Function.prototype.bind = function(obj) {
        var method = this;
        return function() {
            method.apply(obj, arguments);
        }
    }

還記得剛才給大家講的將apply進(jìn)行變換的形式嗎？

    Function.prototype.bind = function(obj) {
        var method = this;
        return function() {
            obj.method(arguments);
        }
    }

大家應(yīng)該看到了bind和apply/call的區(qū)別了吧？ bind方法是返回一個(gè)新的函數(shù)，但是這個(gè)函數(shù)比較特殊，這個(gè)函數(shù)的this對(duì)象已經(jīng)被bind方法傳入的第一個(gè)參數(shù)給綁定了.

比如我們可以使用bind方法來(lái)簡(jiǎn)寫(xiě)一個(gè)方法:

    function fn() {
        var hasOwnKey = Function.call.bind(Object.hasOwnProperty);
        
        for(var key in obj) {
            if(hasOwnKey(obj, key)) {
                //xxxx
            }
        }
    }

唉，真的編不下去了。大家看完之后應(yīng)該已經(jīng)懂了把？ - -

還是不懂的話(huà)在評(píng)論區(qū)留言，我給大家解答。

哦，一開(kāi)始那個(gè)題目的一種寫(xiě)法

    //要實(shí)現(xiàn)一個(gè)加法函數(shù)，這個(gè)時(shí)候向函數(shù)當(dāng)中傳遞個(gè)數(shù)大于0的若干個(gè)整形數(shù)據(jù)，求所有這些數(shù)據(jù)的和。
    function add() {
        return Array.prototype.reduce.call(arguments, function(n1, n2) {
            return n1 + n2;
        });   
    }