手写 call 方法：从原理到实现的超详细拆解 📚在 JavaScript 中，call、apply、bind 堪称控

在 JavaScript 中，call、apply、bind 堪称控制 this 指向的 "三剑客"。其中 call 方法因灵活的参数传递方式，成为日常开发中的高频工具。但你真的理解它的底层逻辑吗？今天我们就一步步手写 call，吃透每一个细节 ✨

一、`call` 方法核心作用与特性 🔍

在动手之前，我们先明确 call 到底能干什么，有哪些必须实现的特性：

1. 核心功能

改变函数执行时的 this 指向：让函数内部的 this 指向指定的对象（context）。
传递参数并立即执行函数：参数需逐个传入，调用后立即执行函数并返回结果。

2. 与 `apply`、`bind` 的关键区别

方法	参数传递方式	执行时机	返回值
`call`	逐个传入参数	立即执行	函数执行结果
`apply`	以数组形式传入参数	立即执行	函数执行结果
`bind`	逐个传入参数	延迟执行（返回新函数）	绑定 `this` 后的新函数

3. 特殊场景处理

当 context 为 null 或 undefined 时：非严格模式下 this 指向 window（浏览器环境），严格模式下指向 null/undefined。
若调用者不是函数：需抛出 TypeError 错误（如 obj.myCall() 中 obj 非函数时）。

二、手写 `call` 前的知识储备 📝

实现 call 需要用到这些 JavaScript 核心知识点，提前梳理清楚：

1. 原型链与函数特性

call 是 Function.prototype 上的方法，因此所有函数都能通过原型链访问（如 fn.call()）。
函数内的 this 指向调用者：当函数作为对象的方法调用时，this 指向该对象（这是实现 call 的核心原理）。

2. `Symbol` 数据类型

Symbol 的值具有唯一性，可避免在对象上挂载函数时覆盖原有属性（解决 " 污染 context" 问题）。

3. 剩余参数（`...args`）

用于收集 call 方法接收的后续参数，方便传递给目标函数。

4. 对象动态特性

JavaScript 对象可动态添加 / 删除属性，这让我们能临时给 context 挂载函数并执行。

三、手写 `call` 方法：分步拆解实现 💻

我们将 Function.prototype.myCall 作为实现目标，按步骤拆解每一行代码的作用：

步骤 1：定义 `myCall` 方法

首先在 Function.prototype 上挂载 myCall，确保所有函数都能调用：

Function.prototype.myCall = function(context, ...args) {
  // 核心逻辑在这里
};

this 指向调用 myCall 的函数（如 greeting.myCall(...) 中，this 就是 greeting）。
context：要绑定的 this 指向对象。
...args：收集传递给目标函数的参数（以数组形式存储）。

步骤 2：处理 `context` 为 `null`/`undefined` 的情况

当 context 为空时，非严格模式下默认指向 window：

if (context === null || context === undefined) {
  context = window; // 浏览器环境，Node 环境可改为 global
}

⚠️ 注意：严格模式下需保留 context 原值（不转为 window），可根据需求添加严格模式判断。

步骤 3：校验调用者是否为函数

若调用 myCall 的不是函数（如 obj.myCall() 中 obj 是对象），需抛出错误：

    if (typeof this !== 'function') {
      throw new TypeError('Function.prototype.myCall called on non-function');
    }

步骤 4：用 `Symbol` 给 `context` 临时挂载函数

为避免覆盖 context 原有属性，用 Symbol 生成唯一键：

    const fnKey = Symbol('fn'); // 生成唯一属性名
    context[fnKey] = this; // 将调用者（函数）挂载到 context 上

此时 context[fnKey] 就是我们要执行的函数（如 greeting）。
当执行 context[fnKey]() 时，函数内的 this 会指向 context（关键！）。

步骤 5：执行函数并传递参数

调用挂载在 context 上的函数，传入收集的参数：

    const result = context[fnKey](...args); // 展开 args 作为参数

...args 将数组转为逐个参数（如 args = [1,2,3] 会转为 1,2,3）。
接收函数执行结果，后续需要返回。

步骤 6：清理临时挂载的函数

执行完后删除 context 上的临时属性，避免污染对象：

    delete context[fnKey];

步骤 7：返回函数执行结果

将函数执行的结果返回，与原生 call 行为保持一致：

    return result;

完整代码实现

整合以上步骤，完整代码如下：

    Function.prototype.myCall = function(context, ...args) {
      // 步骤 2：处理 context 为空的情况
      if (context === null || context === undefined) {
        context = window;
      }

      // 步骤 3：校验调用者是否为函数
      if (typeof this !== 'function') {
        throw new TypeError('Function.prototype.myCall called on non-function');
      }

      // 步骤 4：用 Symbol 临时挂载函数
      const fnKey = Symbol('fn');
      context[fnKey] = this;

      // 步骤 5：执行函数并传参
      const result = context[fnKey](...args);

      // 步骤 6：清理临时属性
      delete context[fnKey];

      // 步骤 7：返回结果
      return result;
    };

四、测试验证：让代码跑起来 🧪

我们用一个实例测试 myCall 是否符合预期：

测试场景

    // 目标函数
    function greeting(...args) {
      console.log('参数：', args); // 打印接收的参数
      return `hello, I am ${this.name}`; // 依赖 this.name
    }

    // 测试对象
    const obj = { name: 'cxk' };

    // 调用 myCall
    const result = greeting.myCall(obj, 1, 2, 3);
    console.log('返回值：', result);

预期输出

    参数：[1, 2, 3]
    返回值：hello, I am cxk

参数 1,2,3 被正确传递给 greeting。
this 成功指向 obj，因此 this.name 为 'cxk'。

五、关键细节总结 🔑

this 的指向：myCall 内部的 this 是调用者函数，通过 context[fnKey] = this 实现绑定。
避免属性污染：Symbol 确保临时属性不会覆盖 context 原有属性，delete 则彻底清理痕迹。
参数传递：...args 收集参数后，再通过 ...args 展开传递，完美模拟原生 call 的参数逻辑。
兼容性处理：对 context 为 null/undefined 的处理，让函数在非严格模式下符合预期行为。

六、拓展思考：与严格模式的兼容 🤔

若在严格模式下，context 为 null 时不应转为 window，可修改步骤 2 的逻辑：

    // 严格模式下保留 context 原值
    if ((context === null || context === undefined) && !('use strict' in this)) {
      context = window;
    }

（注：'use strict' in this 用于检测当前是否为严格模式环境）

通过手写 call 方法，我们不仅掌握了 this 绑定的底层逻辑，更深入理解了原型链、Symbol、函数参数等核心知识点。看似简单的 API 背后，藏着 JavaScript 灵活而强大的设计思想 🚀

手写 call 方法：从原理到实现的超详细拆解 📚

一、call 方法核心作用与特性 🔍