詳解js的bind、call、apply

詳解js的bind、call、apply

說明

• 雖然bind、call、apply都是js很基礎的一塊知識，可是我從未認真總結過這三者的區別。

• 因爲公司後端是用的微服務架構，又沒有中間層對接，致使前端這邊很是難於處理接口數據。

• 因而我在項目初期封裝了一套薄弱的api方法充當中間層的做用，還有爲了讓後端接口字段命名統一，也單獨封裝了一套方法用來統一每一個微服務字段返回名。

• 可是，隨着業務的增長，代碼出現強耦合現象，到最後薄弱的中間層已經撐不住了，連代碼的審視都變得很麻煩。

• 最後不得以從新設計這套api方法，幸虧以前考慮周全留了個心眼，因此今天只花了一天時間就基本完成了。

• 最後的設計思路是不在api中間層使用restful風格的接口（固然後端接口仍是不變），可是又爲了api不重名，就選擇讓程序只加載當前頁面api方法，也就是說若是用戶若是當前操做的是A頁面，那B頁面的api方法是不會被載入的，這樣也避免了首次加載程序的時候加載過多的api方法。

• 而後我在爲每一個api方法提供公共的數據處理方法的時候須要改變api方法的this指向，因而用到了call方法，因此有了此文。

• 後臺=>通道

• 體驗帳號1：帳號：「123456」。密碼：「123456」

• 體驗帳號2：帳號：「123123」。密碼：「123123」

關於this指向

• 它指向什麼徹底取決於函數在哪裏被調用，也就是說，誰調用，誰負責;
• this指向我在前年6月份寫過一篇文章說的很清楚了，因此這裏很少說了，通道
• 另外mdn上面對this指向描述可能會更好。通道

bind

bind用來建立一個新的函數，與普通函數不一樣，這個函數建立的時候能夠指定運行環境。

let log=console.log;
let people = {
    name: '張三',
    getName: function() {
        return this.name;
    },
};
let getNameTo = function(hello) {
    log(this.getName());
    log(this.name+hello);
};
let logName = getNameTo.bind(people);
logName('你好啊！');

所謂的指定運行環境，就是指定運行時候的上下文
上面的代碼如同如下：

let log=console.log;
let people = {
    name: '張三',
    getName: function() {
        return this.name;
    },
    getNameTo:function(hello) {
        log(this.getName());
        log(this.name+hello);
    }
};
people.getNameTo('你好啊！')

call()和apply()

• call和apply會當即執行調用它的函數
• call接受的參數是單個單個傳遞的，apply接受的參數則須要一個數組

let log=console.log;
var people = {
    name: '張三',
    getName: function() {
        return this.name;
    },
};
var getNameTo = function(a,b) {
    console.log(this.getName() + a+ b);
};
getNameTo.call(people,'aa', 'bb');
getNameTo.apply(people,['11', '22']);