手写Function.call,apply,bind函数

前置知识

• ... (扩展) 运算符介绍

问腿

动手实现了这三个函数，然而问题在于实现依赖了 ... 运算符，也许可以通过 Function 构造函数来避免使用 ... 运算符。

代码

Function.prototype.myCall = function(context, ...args) {
    if (typeof this !== 'function') {
        throw new TypeError('Error');
    }
    if (context === undefined) context = window || global; // 适配浏览器，nodejs环境    
    context.__fn = this;
    context.__fn(...args);
};

Function.prototype.myApply = function(context, argsArray) {
    // 对传进来的参数数组调用扩展运算符... 然后直接调用myCall函数
    return this.myCall(context, ...argsArray);
};

Function.prototype.bind = function(context, ...bindedArgs) {
    return (...newArgs) => this.call(context, ...bindedArgs, ...newArgs);
}

function test() {
    // 测试用例
    try {
        window.testStr = '全局环境';
    } catch (err) {
        global.testStr = '全局环境';
    }
    
    
    const foo = {
        testStr: '对象调用',
        run (...args) {
            console.log(`testStr: ${this.testStr} args: ${args}`);
        }
    }
    const run = foo.run;

    foo.run(1, 2, 3);
    run(1, 2, 3);
    run.myCall(foo, 1, 2, 3);
    console.log('test call --------------');

    foo.run(1, 2, 3);
    run(1, 2, 3);
    run.myApply(foo, [1, 2, 3]);
    console.log('test apply --------------');

    const bindedRun = run.bind(foo, 'bindedArg');
    foo.run(1, 2, 3);
    run(1, 2, 3);
    bindedRun(1, 2, 3);
    console.log('test bind --------------');
    
    
} 

test();
复制代码

转载于:https://juejin.im/post/5cd03327f265da036706bdc5