javascript - 了解 "this"在两种不同上下文中的使用

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

How does the "this" keyword work, and when should it be used? (22 个回答)

已关闭 4 年前。

我不明白为什么“this”在这种情况下返回“NaN”:

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

在这个中它指的是“this.value”:

function foo() {
    this.value = 'Hello, world';

    this.bar = function() {
        alert(this.value);
    }
}

var inst = new foo();
inst.bar();

我知道在第一种情况下“this”指向 Window 对象，我只是不明白为什么会这样。

Answer 1

在setInterval内部，this将是全新的，它不知道Counter。您可以使用 bind 将上下文 this 传递给 setInterval

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }.bind(this), 5000);
}

Counter()

或者您也可以使用箭头功能

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 5000);
}

Counter()