无法使用`this`访问该对象。 `this`指向`window`对象 [英] Unable to access the object using `this`. `this` points to `window` object

问题描述

我有这个Javascript构造函数 -

I have this Javascript constructor-

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 并发现当我从中调用 this.start 时setInterval ，此指向窗口对象。为什么会这样？

I tried console.log and found out that when I call this.start from within setInterval, this points to the window object. Why is this so?

推荐答案

这个指针可以指向一个很多事情取决于上下文：

The this pointer can point to one of many things depending upon the context:

1. 在构造函数中（函数调用前面是 new ）这个指向新创建的构造函数实例。


2. 当一个函数作为对象的方法被调用时（例如 obj.funct（））然后函数内的 this 指针指向对象。


3. 您可以使用调用，明确设置此指向的内容apply 或 bind 。


4. 如果以上都不是 this 默认情况下，指针指向全局对象。在浏览器中，这是窗口对象。

1. In constructor functions (function calls preceded by new) this points to the newly created instance of the constructor.
2. When a function is called as a method of an object (e.g. obj.funct()) then the this pointer inside the function points to the object.
3. You can explicitly set what this points to by using call, apply or bind.
4. If none of the above then the this pointer points to the global object by default. In browsers this is the window object.

在你的情况下，你是在 setInterval 中调用 this.start 。现在考虑 setInterval 的虚拟实现：

In your case you're calling this.start inside setInterval. Now consider this dummy implementation of setInterval:

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

了解这一点非常重要 start 未被调用为 this.start 。它被称为功能。这就像做这样的事情：

It's important to understand that start is not being called as this.start. It's being called as funct. It's like doing something like this:

var funct = this.start;
funct();

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

Now both these functions would normally execute the same, but there's one tiny problem - the this pointer points to the global object in the second case while it points to the current this in the first.

一个重要的区别是我们在开始这个指针C>。考虑：

An important distinction to make is that we're talking about the this pointer inside start. Consider:

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

这不是错误。这是JavaScript的工作方式。当你将一个函数作为一个对象的方法调用时（参见我上面的第二点），该函数内的这个指针指向该对象。

This is not a bug. This is the way JavaScript works. When you call a function as a method of an object (see my second point above) the this pointer inside the function points to that object.

在第二种情况下，由于 funct 未被调用为对象的方法，因此默认情况下应用第四条规则。因此此指向窗口。

In the second case since funct is not being called as a method of an object the fourth rule is applied by default. Hence this points to window.

您可以解决这个问题是将 start 绑定到当前的这个指针，然后将其传递给 setInterval 如下：

You can solve this problem by binding start to the current this pointer and then passing it to setInterval as follows:

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

就是这样。希望这个解释能帮助您更多地了解JavaScript的实用性。

That's it. Hope this explanation helped you understand a little bit more about the awesomeness of JavaScript.

这篇关于无法使用`this`访问该对象。 `this`指向`window`对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！