简易模拟JS的Function对象的call、apply和bind方法

对 call 方法的简易模拟

Function.prototype._call = function(ctx) {
    // 将函数自身设置为 ctx 对象的属性
    // 非严格模式：
    //  - null 或 undefined 的this会自动指向全局对象
    //  - 基本类型的this会指向原始值的包装对象
    ctx = ctx === null || ctx === undefined ? window : Object(ctx); 
 7     ctx.fn = this;

    //// 执行该函数
    const [, ...fnArgs] = [...arguments];
    const result = ctx.fn(...fnArgs);

    // 删除该对象上的函数属性
    delete ctx.fn;

    return result;
}; 

+ 另一个版本

function miniCall(ctx) {
  if (typeof this !== 'function') {
    throw new TypeError('调用call方法的对象应为函数！');
  }
  ctx = (ctx === null || ctx === void 0) ? globalThis : Object(ctx);
  const args = [...arguments].slice(1);
  const key = Symbol('call.key');
  ctx[key] = this;
  const result = ctx[key](...args);
  delete ctx[key];
  return result;
}

Function.prototype._call = miniCall;

 

对 apply 方法的简易模拟

Function.prototype._apply = function(ctx, args) {
    ctx = ctx === null || ctx === undefined ? window : Object(ctx);
    ctx.fn = this;

    let result;

    if (Array.isArray(args)) {
        result = ctx.fn(...args);
    } else {
        result = ctx.fn();
    }

    delete ctx.fn;

    return result;
};

 

对 bind 方法的简易模拟

// 1.基础性的模拟
Function.prototype._bind = function(ctx) {
    if (typeof this !== 'function') {
        throw new Error('Error: The bound object is not a function!');
    }

    // 绑定this指向
    const self = this;
    // 获取绑定时的同步传参数
    const [, ...args] = [...arguments];

    return function() {
        return self.apply(ctx, [...args, ...arguments]);
    };
};


// 2.考虑到将返回的绑定this的新函数作为构造函数的情景
Function.prototype._bind = function(ctx) {
    if (typeof this !== 'function') {
        throw new Error('Error: The bound object is not a function!');
    }

    // 绑定this指向
    const self = this;
    // 获取绑定时的同步传参数
    const [, ...args] = [...arguments];

    // 处理返回值被当作构造函数的case
    //// 创建一个空函数（构造函数）
    const F = function() {};
    //// 最终的返回值函数（内部区分this的指向）
    const bound_fn = function() {
        // 当作为构造函数时，this指向F的实例；当作为普通函数时this指向ctx
        const pointer = this instanceof F ? this : ctx;

        return self.apply(pointer, [...args, ...arguments]);
    };
    //// 将F的原型指向被绑定函数的原型
    F.prototype = this.prototype;
    //// 将F的实例设为bound_fn的原型
    bound_fn.prototype = new F();

    return bound_fn;
};