原生js如何實現call,apply以及bind

1、實現call

步驟:

  1. 將函數設為對象的屬性;
  2. 指定this到函數,並傳入給定參數執行函數;
  3. 執行之後刪除這個函數;
  4. 如果不傳入參數,默認指向window;
Function.prototype.mycall = function (context, ...args) {
    //判斷是否為函數,如果不是函數,則報錯
    if (typeof this !== "function") {
        throw new Error("不是函數");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

  測試代碼:

var name = "李輝", age = 25;
var obj = {
    name: "周果",
    objAge: this.age,
    myFun: function (fm, to) {
        console.log(`名字:${this.name},年齡:${this.age},來自:${fm},去往:${to}`)
    }
};
var person = {
    name: "弟弟",
    age: 12,
};

Function.prototype.mycall = function (context, ...args) {
    //判斷是否為函數,如果不是函數,則報錯
    if (typeof this !== "function") {
        throw new Error("不是函數");
    }
    context = context || window;
    context.fn = this;
    const res = context.fn(...args);
    delete context.fn;
    return res;
}

obj.myFun.mycall(person, "成都", "仁壽"); //名字:弟弟,年齡:12,來自:成都,去往:仁壽

2、實現apply

Function.prototype.myApply = function (context, ...args) {
    //判斷是否為函數,如果不是函數,則報錯
    if (typeof this !== "function") {
        throw new Error("不是函數");
    }
    context = context || window;
    context.fn = this;
    args = args && args[0] || [];
    const result = context.fn(...args);
    delete context.fn;
    return result;
}

  測試代碼:

obj.myFun.myApply(person, ["成都", "仁壽"]); //名字:弟弟,年齡:12,來自:成都,去往:仁壽

3、實現bind

  bind()方法主要就是將函數綁定到某個對象,bind()會創建一個函數,函數體內的this對象的值會被綁定到傳入bind()中的第一個參數的值。

  方法1:使用apply

Function.prototype.myBind = function () {
    let self = this; //保存原函數
    let context = [].shift.call(arguments); //保存需要綁定的this上下文
    let args = [...arguments]; //將傳入的剩餘參數轉換成數組
    return function () {                 //返回一個新的函數
        self.apply(context,[].concat.call(args,[...arguments]));
    }
}

  ES6簡化一下:

Function.prototype.myBind = function (context, ...args1) {
        return (...args2) => {  //返回箭頭函數, this綁定調用這個方法的函數對象
            context = context || window;
            return this.apply(context, args1.concat(args2));//合並參數
        }
    }

  方法2:不使用call以及apply

  將上面的代碼和js手寫實現apply的代碼合並一下:

Function.prototype.myBind = function (context, ...args1) {
    return (...args2) => {  //返回箭頭函數, this綁定調用這個方法的函數對象
        context = context || window;
        context.fn = this;
        const args = args1.concat(args2);
        const res = context.fn(...args);
        delete context.fn;
        return res;
    }
}

  測試代碼:

obj.myFun.myBind(person, "成都", "仁壽")();//名字:弟弟,年齡:12,來自:成都,去往:仁壽

以上就是原生js如何實現call,apply以及bind的詳細內容,更多關於js實現call,apply以及bind的資料請關註WalkonNet其它相關文章!

推薦閱讀: