一、为什么需要手写 apply 和 bind？

在 JavaScript 开发中，apply 和 bind 是改变函数执行上下文（this 指向）的核心方法。虽然现代开发中直接使用原生方法的场景较多，但理解其底层原理对解决以下问题至关重要：

1. 面试高频考点：手写实现是前端面试的经典题目，考察对函数、this 和作用域的深度理解。
2. 自定义工具库：在开发低级工具或框架时，可能需要模拟原生方法的行为。
3. 环境兼容性：某些极端场景（如自定义沙箱环境）可能需要重新实现这些方法。
4. 性能优化：理解原理后，可以针对特定场景优化调用方式。

二、apply 的实现原理与代码

1. apply 的作用

apply 方法允许调用一个函数，并指定函数内部的 this 值，同时以数组（或类数组）的形式传入参数。

function greet(name, age) {
  console.log(`Hello, ${name}! You are ${age} years old. This is ${this.role}.`);
}
const person = { role: 'Developer' };
greet.apply(person, ['Alice', 25]); // 输出：Hello, Alice! You are 25 years old. This is Developer.

2. 手写 apply 的实现

手写 apply 的核心步骤：

1. 将目标函数（调用 apply 的函数）绑定到指定的 this 上下文。
2. 处理传入的参数数组，将其展开为函数调用时的参数。
3. 执行函数并返回结果。

Function.prototype.myApply = function(context, args) {
  // 处理 context 为 null 或 undefined 的情况，默认指向全局对象（非严格模式）或 undefined（严格模式）
  context = context || window; // 浏览器环境，Node.js 中为 global
  // 为 context 添加一个临时属性，值为当前函数
  const fnSymbol = Symbol('fn');
  context[fnSymbol] = this;
  // 调用函数，传入展开的参数
  const result = context[fnSymbol](...(args || []));
  // 删除临时属性
  delete context[fnSymbol];
  return result;
};
// 测试
function test(a, b) {
  console.log(this.x, a, b);
  return this.x + a + b;
}
const obj = { x: 10 };
console.log(test.myApply(obj, [20, 30])); // 输出：10 20 30，返回 60

关键点解析：

• Symbol 的使用：避免属性名冲突，确保临时属性唯一。
• 参数处理：args 可能为 null 或 undefined，需提供默认值。
• 严格模式兼容：在严格模式下，context 为 null 或 undefined 时，this 会保持原值，但手写实现中通常模拟非严格模式行为。

三、bind 的实现原理与代码

1. bind 的作用

bind 方法创建一个新函数，当调用时，将其 this 绑定到指定对象，并提供预设的初始参数。

function greet(name) {
  console.log(`Hello, ${name}! This is ${this.role}.`);
}
const person = { role: 'Designer' };
const boundGreet = greet.bind(person);
boundGreet('Bob'); // 输出：Hello, Bob! This is Designer.

2. 手写 bind 的实现

手写 bind 的核心步骤：

1. 返回一个新函数，该函数在调用时会将 this 绑定到指定对象。
2. 支持预设参数（柯里化）。
3. 保持原函数的 length 和 name 属性（可选）。

Function.prototype.myBind = function(context, ...args) {
  const originalFunc = this;
  // 返回一个新函数
  const boundFunc = function(...innerArgs) {
    // 判断是否通过 new 调用
    const isNewCall = new.target !== undefined;
    // 如果是 new 调用，忽略绑定的 this，以新创建的对象为准
    const thisArg = isNewCall ? this : context;
    // 合并预设参数和调用时传入的参数
    const finalArgs = [...args, ...innerArgs];
    // 调用原函数
    return originalFunc.apply(thisArg, finalArgs);
  };
  // 保持原型链（处理 new 调用）
  boundFunc.prototype = originalFunc.prototype;
  return boundFunc;
};
// 测试
function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}, ${this.age} years old.`);
};
const obj = { role: 'Manager' };
const BoundPerson = Person.myBind(obj, 'Alice');
const alice = new BoundPerson(25); // 通过 new 调用
alice.greet(); // 输出：Hi, I'm Alice, 25 years old.
console.log(alice.role); // undefined（new 调用忽略绑定的 this）

关键点解析：

• new.target 的使用：判断是否通过 new 调用，以决定 this 的指向。
• 原型链处理：确保通过 bind 返回的函数在 new 调用时能正确继承原型。
• 参数合并：支持预设参数和调用时参数的拼接。

四、常见问题与解决方案

1. 严格模式下的行为

在严格模式下，apply 和 call 的 context 为 null 或 undefined 时，this 不会指向全局对象。手写实现中需明确是否模拟严格模式行为。

2. 性能优化

手写实现中，Symbol 的使用可能带来轻微性能开销。在生产环境中，若无需避免属性冲突，可直接使用字符串属性名（但需确保唯一性）。

3. 边界条件处理

• 函数作为构造函数调用时（new），应忽略绑定的 this。
• 参数为 null 或 undefined 时的默认值处理。
• 原函数为箭头函数时的行为（箭头函数的 this 不可绑定）。

五、总结与扩展

通过手写 apply 和 bind，我们深入理解了 JavaScript 中函数调用和 this 绑定的核心机制。这些知识不仅有助于应对面试，还能在开发自定义工具或框架时提供灵活的底层支持。

扩展思考：

1. 手写 call：call 与 apply 类似，但参数以列表形式传入。实现时可复用 apply 的逻辑。
2. 软绑定（Soft Bind）：一种改进的绑定方式，允许后续通过 call 或 apply 覆盖绑定的 this。
3. ES6+ 的替代方案：箭头函数和类字段语法（如 arrowFn = () => {}）提供了更简洁的 this 绑定方式。

掌握这些底层原理后，开发者可以更自信地处理复杂的 this 绑定场景，并在需要时灵活实现自定义的函数调用机制。