在对象中定义的函数上取消反弹无法访问对象的上下文

在JavaScript中，当你在对象的方法中使用普通函数而不是箭头函数时，this 关键字通常指向全局对象（在浏览器中是 window），而不是定义该方法的对象。这就是所谓的“上下文丢失”或“反弹”问题。

基础概念

上下文：在JavaScript中，上下文通常指的是函数执行时的环境。this 关键字指向当前执行上下文的对象。
反弹：当一个方法被传递到另一个上下文中调用时，this 的值可能会改变，导致无法访问原始对象的属性和方法。

问题原因

当你将一个对象的方法传递给另一个函数并在那里调用时，如果使用普通函数定义方法，this 将不再指向原来的对象。

解决方法

使用箭头函数：箭头函数不会创建自己的 this 上下文，它会捕获其所在上下文的 this 值。

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

const greetFunction = obj.greet;
greetFunction(); // 输出: Hello, my name is undefined

注意：箭头函数中的 this 是在定义时绑定的，而不是在运行时。

使用 .bind() 方法：.bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数。

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

const greetFunction = obj.greet.bind(obj);
greetFunction(); // 输出: Hello, my name is Alice

使用变量保存 this：在调用方法之前，将 this 的值保存到一个变量中，然后在方法内部使用这个变量。

const obj = {
  name: 'Alice',
  greet() {
    const self = this;
    setTimeout(function() {
      console.log(`Hello, my name is ${self.name}`);
    }, 100);
  }
};

obj.greet(); // 输出: Hello, my name is Alice

应用场景

这个问题常见于事件处理程序、回调函数和异步操作中，例如在使用 setTimeout、setInterval 或者将方法作为参数传递给其他函数时。

示例代码

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

// 错误的使用方式
setTimeout(obj.greet, 100); // 输出: Hello, my name is undefined

// 正确的使用方式
setTimeout(obj.greet.bind(obj), 100); // 输出: Hello, my name is Alice