1、簡單說一下bind、call、apply的區別

　　三者都是用於改變函數體內this的指向，但是bind與apply和call的最大的區別是：bind不會立即調用，而是返回一個新函數，稱為綁定函數，其內的this指向為創建它時傳入bind的第一個參數，而傳入bind的第二個及以後的參數作為原函數的參數來調用原函數。

var obj = {};

function test() {
    console.log(this === obj);
}

test(); //false

var testObj = test.bind(obj);
testObj();  //true

　　apply和call

　　如果使用apply或call方法，那麽this指向他們的第一個參數，apply的第二個參數是一個參數數組，call的第二個及其以後的參數都是數組裏面的元素，就是說要全部列舉出來；

以下是MDN文檔：

bind語法：

• func.bind(thisArg[, arg1[, arg2[, ...]]])
• thisArg 當綁定函數被調用時，該參數會作為原函數運行時的this指向。當使用new 操作符調用綁定函數時，該參數無效。
• arg1, arg2, ... 當綁定函數被調用時，這些參數將置於實參之前傳遞給被綁定的方法。

call語法：

• fun.call(thisArg, arg1, arg2, ...)
• thisArg:：在fun函數運行時指定的this值。需要註意的是，指定的this值並不一定是該函數執行時真正的this值，如果這個函數處於非嚴格模式下，則指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)，同時值為原始值(數字，字符串，布爾值)的this會指向該原始值的自動包裝對象。
• arg1, arg2, ... 指定的參數列表。

apply語法：

• fun.apply(thisArg, [argsArray])
• thisArg： 在 fun 函數運行時指定的 this 值。需要註意的是，指定的 this 值並不一定是該函數執行時真正的 this 值，如果這個函數處於非嚴格模式下，則指定為 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象），同時值為原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。
• argsArray 一個數組或者類數組對象，其中的數組元素將作為單獨的參數傳給 fun 函數。如果該參數的值為null 或 undefined，則表示不需要傳入任何參數。從ECMAScript 5 開始可以使用類數組對象。

區別總結：

1. 當我們使用一個函數需要改變this指向的時候才會用到call`apply`bind
2. 如果你要傳遞的參數不多，則可以使用fn.call(thisObj, arg1, arg2 ...)
3. 如果你要傳遞的參數很多，則可以用數組將參數整理好調用fn.apply(thisObj, [arg1, arg2 ...])
4. 如果你想生成一個新的函數長期綁定某個函數給某個對象使用，則可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

2、bind、call、apply的實現

myBind:

Function.prototype.myBind = function() {
    var _this = this;
    var context = [].shift.call(arguments);// 保存需要綁定的this上下文
    var args = [].slice.call(arguments); //剩下參數轉為數組
    console.log(_this, context, args);
    return function() {
        return _this.apply(context, [].concat.call(args, [].slice.call(arguments)));
    }
};

myCall:

/**
 * 每個函數都可以調用call方法，來改變當前這個函數執行的this關鍵字，並且支持傳入參數
 */
Function.prototype.myCall = function(context) {
    //第一個參數為調用call方法的函數中的this指向
    var context = context || global;
    //將this賦給context的fn屬性
    context.fn = this;//此處this是指調用myCall的function

    var arr = [];
    for (var i=0,len=arguments.length;i<len;i++) {
        arr.push("arguments[" + i + "]");
    }
    //執行這個函數，並返回結果
    var result = eval("context.fn(" + arr.toString() + ")");
    //將this指向銷毀
    delete context.fn;
    return result;
}

myApply:

/**
 * apply函數傳入的是this指向和參數數組
 */
Function.prototype.myApplay = function(context, arr) {
    var context = context || global;
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn(); //直接執行
    } else {
        var args = [];
        for (var i=0,len=arr.length;i<len;i++) {
            args.push("arr[" + i + "]");
        }
        result = eval("context.fn(" + args.toString() + ")");
    }
    //將this指向銷毀
    delete context.fn;
    return result;
}

　　以上是bind、apply、和call的模擬實現

　　註意：綁定函數(bind函數返回的新函數)不可以再通過apply和call改變其this指向，

即當綁定函數調用apply和call改變其this指向時，並不能達到預期效果。

var obj = {};

function test() {
    console.log(this === obj);
}

var testObj = test.bind(obj);
testObj();  //true

var objTest = {
    "作者": "chengbo"
};
/**
 * 預期返回false, 但是testObj是個綁定函數，所以不能改變其this指向
 */
testObj.apply(objTest); //true
testObj.call(objTest); //true

bind、call、apply的區別與實現