JS-重寫內置的call、apply、bind

let obj = {
    fn(x, y) {
        console.log(this, x, y);
    }
};
        
obj.fn.call({}, 10, 20); // {}, 10, 20
obj.fn.apply(window, [10, 20]); //window, 10, 20

setTimeout(obj.fn.bind(30, 10, 20), 1000); //Number(30), 10, 20

先試著重寫一下bind：

從參數看，首先是傳遞一個this指向並需要做一下處理，後續還有若幹個參數

function bind(context) {
    //context可能是null或undefined，需要處理一下
    if (context == undefined) {
        context = window;
    }
    //借用數組的slice方法結合arguments獲取傳遞的指定this之後的參數集合
    var args = [].slice.call(arguments, 1);
}

bind函數中的this是指最終要執行的函數，而且執行bind的時候會返回一個新的匿名函數，並且在這個新的函數中執行最終要執行的函數也就是this，並且改變其this指向：

function bind(context) {
    //context可能是null或undefined，需要處理一下
    if (context == undefined) {
        context = window;
    }
    //借用數組的slice方法結合arguments獲取傳遞的指定this之後的參數集合
    var args = [].slice.call(arguments, 1);
    //需要最終執行的函數
    var _this = this;
    return function anonymous() {
        _this.apply(context, args);
    };
}    

這個bind函數大體算是寫完，但還是有些問題，比如給元素進行事件綁定，div.onclick = obj.fn.bind(window, 10, 20)，元素進行點擊的時候，會有ev事件對象，相當於在執行bind函數返回的那個匿名函數中也需要傳遞參數，而且參數個數不確定，當然，最後還需要改寫一下原型上的方法：

function bind(context) {
    //context可能是null或undefined，需要處理一下
    if (context == undefined) {
        context = window;
    }
    //借用數組的slice方法結合arguments獲取傳遞的指定this之後的參數集合
    var args = [].slice.call(arguments, 1);
    //需要最終執行的函數
    var _this = this;
    return function anonymous() {
        var amArg = [].slice.call(arguments, 0);
        _this.apply(context, args.concat(amArg));
    };
} 
Function.prototype.bind = bind;

這樣，這個bind函數的重寫算是完成了。

我們用es6改寫一下：

function bind(context = window, ...args) {
    return (...amArg) => this.call(context, ...args.concat(amArg));
}

代碼看上去確實精簡不少，當然也可以用apply，但經測試，性能不如call。

接下來看看重寫call：

 它會有若幹個參數，第一個是要指向的this，直接用es6寫法：

function call(context = window, ...args) {

}

函數中的this就是要調用call方法的函數，想讓該函數執行並且其內部this指向傳遞進來的context，那麼形如context.函數可以做到：

function call(context = window, ...args) {
    //給context增加一個$fn屬性，把當前函數賦給這個屬性      
    context.$fn = this;
    //讓context.$fn這個方法執行，就是之前this函數執行，並且this指向的是context
    let result = context.$fn(...args);
    //增加完方法應該刪除 
    delete context.$fn;
    return result;
}
Function.prototype.call = call;

apply也就出來了：

function apply(context = window, args) {
    context.$fn = this;
    let result = context.$fn(...args);
    delete context.$fn;
    return result;
}
Function.prototype.apply = apply;

這裡邊還是有兩個問題，一是$fn屬性沒有刪除，目前還沒想到解決辦法，一個就是傳進來的context必須是引用類型，但其實可以是基礎類型：

function call(context = window, ...args) {
    context === null ? context = window : null;
    let type = typeof context;
    if (type !== "object" && type !== "function" && type !== "symbol") {
        //=>基本類型值
        switch (type) {
            case 'number':
                context = new Number(context);
                break;
            case 'string':
                context = new String(context);
                break;
            case 'boolean':
                context = new Boolean(context);
                break;
        }
    }
    context.$fn = this;
    let result = context.$fn(...args);
    delete context.$fn;
    return result;
}

apply的判斷就不寫了，但基本都實現了重寫，當然，這幾個方法畢竟是js的內置寫法，我們只是想大致實現它們的實現原理。