手写实现 call 方法

问题

call() 是 JavaScript 中用于改变函数执行时 this 指向的方法。我们需要手动实现一个 myCall 方法，使其具备与原生 call 方法相同的功能：

• 改变函数内部的 this 指向
• 支持传入多个参数
• 能够正确返回函数执行结果

解答

/**
 * 手写实现 call 方法
 * @param {Object} context - 要绑定的上下文对象
 * @param {...any} args - 传递给函数的参数
 * @returns {any} 函数执行结果
 */
Function.prototype.myCall = function(context, ...args) {
  // 1. 处理 context，如果为 null 或 undefined，则指向全局对象
  // 在浏览器中是 window，在 Node.js 中是 global
  context = context || globalThis;
  
  // 2. 将 context 转换为对象类型（处理原始值的情况）
  context = Object(context);
  
  // 3. 使用 Symbol 创建唯一的属性名，避免属性名冲突
  const fnSymbol = Symbol('fn');
  
  // 4. 将当前函数（this）作为 context 的方法
  context[fnSymbol] = this;
  
  // 5. 通过对象方法调用的方式执行函数，此时函数内部的 this 指向 context
  const result = context[fnSymbol](...args);
  
  // 6. 删除临时添加的方法，避免污染对象
  delete context[fnSymbol];
  
  // 7. 返回函数执行结果
  return result;
};

使用示例

// 示例 1：基本使用
function greet(greeting, punctuation) {
  return `${greeting}, 我是 ${this.name}${punctuation}`;
}

const person = { name: '张三' };

console.log(greet.myCall(person, '你好', '!'));
// 输出: "你好, 我是 张三!"

// 示例 2：与原生 call 对比
console.log(greet.call(person, '你好', '!'));
// 输出: "你好, 我是 张三!"

// 示例 3：处理 null/undefined
function showThis() {
  console.log(this);
}

showThis.myCall(null); // 输出: globalThis (window 或 global)

// 示例 4：处理原始值
function getType() {
  return Object.prototype.toString.call(this);
}

console.log(getType.myCall(123));
// 输出: "[object Number]"

console.log(getType.myCall('hello'));
// 输出: "[object String]"

// 示例 5：返回值测试
function sum(a, b) {
  return a + b + this.value;
}

const obj = { value: 10 };
console.log(sum.myCall(obj, 5, 3));
// 输出: 18

关键点

• 使用 Symbol 避免属性冲突：使用 Symbol 创建唯一的属性名，防止覆盖对象原有属性

• 对象方法调用改变 this：将函数作为目标对象的方法调用，利用 JavaScript 中”谁调用方法，this 就指向谁”的特性

• 处理边界情况：

  • 当 context 为 null 或 undefined 时，指向全局对象
  • 使用 Object(context) 将原始值转换为对象类型

• 使用扩展运算符传参：通过 ...args 收集和展开参数，支持任意数量的参数传递

• 清理临时属性：执行完毕后删除临时添加的方法，保持对象的纯净性

• 返回执行结果：确保函数的返回值能够正确传递给调用者