对象连接操练指南：this、call、apply 和 bind 的艺术

2023-12-29 03:12:33

在 JavaScript 的迷人世界中，this、call、apply 和 bind 是四位强大的对象连接大师，它们拥有将对象关联到函数的非凡能力，从而打开了一系列充满创造力的可能性。

this 上下文之锚

this 是 JavaScript 中的神奇变量，它代表当前正在执行的函数所调用的对象。它充当上下文之锚，将函数的执行与特定的对象联系起来。

例如：

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // 输出：Hello, my name is John

call() 和 apply()：函数借用

call() 和 apply() 方法允许我们临时将 this 关键字绑定到一个特定的对象，即使该对象不是函数的固有所有者。这类似于向函数借用 this，使我们可以创建松散耦合的代码。

call() 接受一个对象作为第一个参数，然后按顺序传递其他参数。
apply() 接受一个对象作为第一个参数，然后将参数传递为数组。

例如：

const obj1 = { name: 'Object 1' };
const obj2 = { name: 'Object 2' };

const greetFunc = function() {
  console.log(`Hello, my name is ${this.name}`);
};

greetFunc.call(obj1); // 输出：Hello, my name is Object 1
greetFunc.apply(obj2); // 输出：Hello, my name is Object 2

bind()：持久连接

bind() 方法与 call() 和 apply() 类似，但它创建了一个新的函数，其中 this 关键字永久绑定到指定的上下文对象。这对于创建需要持久上下文环境的事件处理程序或回调函数非常有用。

例如：

const button = document.getElementById('my-button');

const handleClick = function() {
  console.log(this);
};

button.addEventListener('click', handleClick.bind(obj1));