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的內置寫法，我們只是想大致實作它們的實作原理，

標籤：JavaScript

上一篇：08.JS單詞整理

下一篇：00.ES6簡介