改變函式的this指向方法

1、call函式

/**
 * 功能
 * 1、接收到引數
 * 2、繫結this
 * 3、保留返回的內容
 */

Function.prototype.myCall = function () {
    const self = this;
    // console.log('this',this)

    // const args1 = [...arguments]
    const args = Array.prototype.slice.call(arguments)
    // console.log('args',args)
    // console.log('args1',args1)
    // _this就是改變之後的this
    const _this = args.shift()
    // console.log('_this',_this)
    _this.fn = self

    // 執行原本的引數
    const res = _this.fn(...args)
    delete _this.fn
    return res;
}

 

2、apply函式

Function.prototype.myApply = function () {
    const self = this;
    // 只有一個引數或者兩個，第二個是陣列
    const _this = arguments[0];
    console.log('_this',_this)
    _this.fn = self;

    let result;
    if (arguments[1]){
        result = _this.fn(...arguments[1])
    }else {
        result = _this.fn()
    }

    delete _this.fn;
    return result;
}
 

3、bind函式

/**
 *  1、改變this指向
 *  2、bind後面第一個引數是this的值，後面的引數是函式接收的引數的值
 *  3、返回值不變（return）
 */

// 定義的地方在函式的原型上
Function.prototype.myBind = function () {
    // this的指向是原函式
    const self = this;
    // 獲取傳入的引數值
    // 原本的arguments得到的是一個偽陣列，需要轉化為真正的陣列
    const args = Array.prototype.slice.call(arguments);
    // pop出第一個數，取出this
    const thisValue = args.shift()

    return function () {
        // 返回執行函式
        return self.apply(thisValue,args);
    }
}


 

4、區別

1. call和apply都是定義即執行，但是bind定義之後要被呼叫才執行
2. call和bind傳入的是引數列表，但是apply傳入的引數是以陣列的形式