如何在回调中访问正确的“this”？

介绍

在JavaScript编程中，“this”关键字经常被用来引用当前函数所属的对象，但是在使用回调函数时，经常会出现“this”指向错误的情况。本文将讨论如何在回调中访问正确的“this”。

回调函数

在JavaScript中，回调函数通常用于处理异步代码。回调函数是一个 function，被传递给另一个 function，并在后者完成后执行。例如，以下是使用 setTimeout() function 的例子：

function foo() {

  setTimeout(function() {
    console.log(this); // 这里的 "this" 是 Window 对象，而不是 foo()
  }, 1000);
}

在上面的例子中，setTimeout() function 接受一个 function 作为参数，并在1秒后执行该函数。在这个 function 内部，this 关键字引用的是 Window 对象，而不是 foo() 函数。

解决方法一：使用“that”或“self”

解决回调函数中“this”指向错误的方法之一是在外部函数中创建一个“that”或“self”变量，将其设置为 this，在回调函数中使用该变量而不是 this。例如：

function foo() {

  var that = this; // "that" 变量引用 "foo()" 函数的 this
  setTimeout(function() {
    console.log(that); // 此时输出 "foo()" 函数的 this
  }, 1000);
}

在上面的例子中，that 变量设置为 foo() 函数的 this 值。在回调函数内部，我们使用 that 变量而不是 this。

解决方法二：使用箭头函数

另一个解决回调函数中“this”指向错误的方法是使用箭头函数。箭头函数通过继承父级上下文的 this 值来解决这个问题。例如：

function foo() {

  setTimeout(() => {
    console.log(this); // 这里的 "this" 是 "foo()" 函数的 this
  }, 1000);
}

在上面的例子中，箭头函数通过继承父级上下文的 this 值来访问 foo() 函数的 this 值。

解决方法三：使用 bind()

另一个解决回调函数中“this”指向错误的方法是使用 bind() function。bind() function 创建了一个新的 function，其中 this 值设置为指定的对象。例如：

function foo() {

  setTimeout(function() {
    console.log(this); // 此时输出 "foo()" 函数的 this
  }.bind(this), 1000);
}

在上面的例子中，我们使用 bind() function 将 this 值设置为 foo() 函数的 this 值。

总结

在JavaScript编程中，回调函数通常用于处理异步代码。在回调函数内部访问正确的 this 值是一个常见的问题，有多种解决方法，包括使用“that”或“self”变量、箭头函数和 bind() function。