第14天:这丢失了
#javascript #100daysofcode #day14

在JavaScript中,this的上下文在某些情况下可能会丢失,从而导致意外行为。

将方法作为回调:

当您将方法作为回调函数传递给另一个功能或事件处理程序时,其上下文可能会出乎意料。

const obj = {
  nom: 'John',
  sayHello: function() {
    console.log(`Hello, ${this.nom}!`);
  }
};

// Using the 'sayHello' method as a callback to setTimeout
setTimeout(obj.sayHello, 1000); // output: Hello, undefined!

settimeout执行sayHello方法时,this的上下文不再是obj,而是它成为全局对象。结果,this.nom将是undefined

要解决此问题,您可以使用函数借用在将方法传递为回调之前明确设置此上下文的上下文

setTimeout(obj.sayHello.bind(obj), 1000);
// or
setTimeout(() => obj.sayHello(), 1000);
// or
setTimeout(function() {
  obj.sayHello();
}, 1000);

调用从函数返回的方法:

另一个常见的情况,可能会丢失的上下文是调用从另一个函数返回的方法

function createCounter() {
  let count = 0;
  return {
    increment: function() {
      count++;
      console.log(count);
    }
  };
}

const counter = createCounter();
const incrementFn = counter.increment;
incrementFn(); // What will happen here?

当我们将counter.increment分配给incrementFn时,它将失去与计数器对象的关联。因此,当我们调用incrementFn()时,增量函数内部将变为全局对象(窗口或全局),并且计数将无法访问。

要保留this的正确上下文,您可以使用bind

const incrementFn = counter.increment.bind(counter);
incrementFn(); // Output: 1

概括:-

注意这些情况可能会丢失的情况对于编写正确且可预测的JavaScript代码至关重要。使用适当的绑定技术或箭头功能可以帮助确保this在不同情况下的预期行为。