call、apply、bind是如何实现改变this的

call, apply, 和 bind 方法都是通过改变函数的执行上下文（this）来实现改变 this 的。

1. call 方法

  call 方法：call 方法通过将函数作为对象的方法调用，并传递一个新的上下文对象作为第一个参数来改变函数的执行上下文。函数内部可以通过 this 引用该新的上下文对象。

• 实现示例：

Function.prototype.call = function(context, ...args) {
  context = context || window; // 如果上下文对象未提供，则默认为全局对象（浏览器中为 window）
  const key = Symbol('fn'); // 创建一个唯一的键，以避免覆盖上下文对象中的现有属性
  context[key] = this; // 将函数作为对象的方法添加到上下文对象中
  const result = context[key](...args); // 调用函数
  delete context[key]; // 删除添加的方法属性
  return result; // 返回函数执行结果
};

// 使用示例
const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

person.greet.call(otherPerson, 'Hello'); // 输出：Hello, Bob!

2. apply 方法

  apply 方法：apply 方法与 call 方法类似，不同之处在于它接受一个参数数组而不是逐个列出参数。参数数组中的每个元素都会作为参数传递给函数。

• 实现示例：

Function.prototype.apply = function(context, args) {
  context = context || window; // 如果上下文对象未提供，则默认为全局对象（浏览器中为 window）
  const key = Symbol('fn'); // 创建一个唯一的键，以避免覆盖上下文对象中的现有属性
  context[key] = this; // 将函数作为对象的方法添加到上下文对象中
  const result = context[key](...args); // 调用函数，并将参数数组展开传递
  delete context[key]; // 删除添加的方法属性
  return result; // 返回函数执行结果
};

// 使用示例
const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

person.greet.apply(otherPerson, ['Hello']); // 输出：Hello, Bob!

3. bind 方法

  bind 方法：bind 方法返回一个新函数，并预先绑定了指定的执行上下文。新函数被调用时，它的执行上下文将是预先绑定的上下文对象。

• 实现示例：

Function.prototype.bind = function(context, ...args) {
  const fn = this; // 当前函数
  return function(...innerArgs) {
    return fn.call(context, ...args, ...innerArgs); // 调用原始函数，并传递绑定的上下文和参数
  };
};

// 使用示例
const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

const greetBob = person.greet.bind(otherPerson);
greetBob('Hello'); // 输出：Hello, Bob!

4. 区别

4.1 call 方法：

  call 方法允许你显式地调用一个函数，并指定函数执行时的上下文（this）。除了第一个参数是要绑定的上下文对象之外，它可以接受任意数量的参数作为要传递给函数的参数。

• 示例：

const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

person.greet.call(otherPerson, 'Hello'); // 输出：Hello, Bob!

4.2 apply 方法：

  apply 方法与 call 方法类似，但它接受一个参数数组而不是逐个列出参数。数组中的每个元素都会被作为参数传递给函数。

• 示例：

const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

person.greet.apply(otherPerson, ['Hello']); // 输出：Hello, Bob!

4.3bind 方法：

  bind 方法不会立即调用函数，而是返回一个新函数，新函数的执行上下文（this）被绑定为指定的上下文对象。bind 方法可以预先绑定函数的上下文，并返回一个新的函数，以后可以在需要时调用。

• 示例：

const person = {
  name: 'Alice',
  greet: function(message) {
    console.log(`${message}, ${this.name}!`);
  }
};

const otherPerson = {
  name: 'Bob'
};

const greetBob = person.greet.bind(otherPerson);
greetBob('Hello'); // 输出：Hello, Bob!

4.4 总结：

• call 和 apply 方法可以立即调用函数并指定执行上下文，不同之处在于参数的传递方式。
• bind 方法返回一个新函数，预先绑定了执行上下文，并可以在需要时调用。
• call 和 apply 是直接调用函数，而 bind 是创建一个新函数。
• call 和 apply 可以传递参数列表，而 bind 只能传递执行上下文。