javascript - 无法使用 `this` 访问对象。 `this` 指向 `window` 对象

Question

我有这个 Javascript 构造函数-

function TestEngine() {
    this.id='Foo';
}

TestEngine.prototype.fooBar = function() {
    this.id='bar';
    return true;
}

TestEngine.prototype.start = function() {
    this.fooBar();
}

TestEngine.prototype.startMethod = function() {
    inter = setInterval(this.start, 200);
}

var test = new TestEngine();
test.startMethod();

给我这个错误 -

Uncaught TypeError: Object [object global] has no method 'fooBar' 

我尝试了 console.log 并发现当我从 setInterval 中调用 this.start 时，this 指向 window 对象。为什么会这样？

Answer 1

根据上下文，this 指针可以指向许多事物之一:

1. 在构造函数中(函数调用以 new 开头)this 指向新创建的构造函数实例。
2. 当函数作为对象的方法调用时(例如 obj.funct())，函数内的 this 指针指向对象。<
3. 您可以使用call、apply 或bind 显式设置this 指向的内容。
4. 如果以上都不是，则 this 指针默认指向全局对象。在浏览器中，这是 window 对象。

在您的情况下，您在 setInterval 中调用 this.start。现在考虑这个 setInterval 的虚拟实现:

function setInterval(funct, delay) {
    // native code
}

重要的是要了解 start 不是作为 this.start 调用的。它被称为 funct。这就像做这样的事情:

var funct = this.start;
funct();

现在这两个函数通常会执行相同的操作，但是有一个小问题 - this 指针在第二种情况下指向全局对象，而它指向当前 this在第一个。

一个重要的区别是我们讨论的是 start 中的 this 指针。考虑:

this.start();           // this inside start points to this
var funct = this.start;
funct();                // this inside funct (start) point to window

这不是错误。这就是 JavaScript 的工作方式。当您将函数作为对象的方法调用时(请参阅我上面的第二点)，函数内的 this 指针指向该对象。

在第二种情况下，因为 funct 没有作为对象的方法被调用，所以默认应用第四条规则。因此 this 指向 window。

您可以通过将start 绑定(bind)到当前的this 指针然后将其传递给setInterval 来解决这个问题，如下所示:

setInterval(this.start.bind(this), 200);

就是这样。希望这个解释能帮助您更多地了解 JavaScript 的强大之处。