美文网首页
[JavaScript] 理解call、apply、bind原理

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

作者: jiansheng | 来源:发表于2019-02-27 15:11 被阅读0次

    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);
    

    相关文章

      网友评论

          本文标题:[JavaScript] 理解call、apply、bind原理

          本文链接:https://www.haomeiwen.com/subject/jgffuqtx.html