[JavaScript] 理解call、apply、bind原理

Function.prototype.call()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

Function.prototype.myCall = function (thisArg, ...argArray) {
    thisArg = thisArg ? thisArg : window;
    const symbol = Symbol();
    thisArg[symbol] = this;
    const res = thisArg[symbol](...argArray);
    delete thisArg[symbol];
    return res;
};

function fn(a, b) {
    console.log(this.number, a, b);
}

const obj = {
    number: 0,
};

fn.myCall(obj, 1, 2); // 0 1 2
// 像 obj.fn(1, 2)

Function.prototype.apply()

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

Function.prototype.myApply = function (thisArg, argArray) {
    thisArg = thisArg ? thisArg : window;
    const symbol = Symbol();
    thisArg[symbol] = this;
    const res = thisArg[symbol](argArray);
    delete thisArg[symbol];
    return res;
};

function fn(a) {
    console.log(this.number, a);
}

const obj = {
    number: 0,
};

fn.myApply(obj, [1, 2]); // 0 [1, 2]
// 像 obj.fn([1, 2])

Function.prototype.bind()

bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

Function.prototype.myBind = function (thisArg) {
    thisArg = thisArg ? thisArg : window;
    const _this = this;
    return function () {
        const fnArgs = [...arguments];
        return _this.call(thisArg, ...fnArgs);
    }
}

function fn(a, b) {
    console.log(this.number, a, b);
}

const obj = {
    number: 0,
};

const bindFn = fn.myBind(obj);
bindFn(1, 2);