JavaScript 'this' 让我抓狂

Question

我经常使用 Visualize弄清楚范围、函数调用站点等等，同时我推进我的 JS 学习升级。最近我碰到了这个:

function foo() {
    console.log( this.a );
}

var a = 2;

function bar() {
    var a = 5;
    foo();
};

bar();

Google Chrome 在控制台中给了我 2，而我期待的是 5(foo 的调用站点)。有趣的是，pythongtutor(当然是在 JS 下)给我一个未定义的错误信息，如下所示:

我有两个问题:

1. 为什么结果是 2 而不是 5，因为调用 foo 的站点在 a 为 5 的 bar 内。
2. 为什么 pythontutor 会出现标记和错误？

Answer 1

1) Why the outcome is 2 and not 5 since, calling site for foo is within bar where a is 5.

调用的站点对this没有任何影响在 JavaScript 中。 如何您调用该函数以及该函数是如何定义的(例如，它是绑定(bind)函数、箭头函数，还是只是一个普通函数或方法)才是最重要的。

2) Why is pythontutor flaggin and error?

因为在严格模式下，会报错。

当你这样做时:

foo();

...您没有设置任何明确的 this打电话。如果foo是一个简单的函数(你的也是)，这意味着在松散模式下，this将在调用 foo 期间引用全局对象，并查看全局对象的 a属性(property) this.a (全局 a 的值为 2)。在严格模式下，this将是 undefined , 所以 this.a是一个错误(试图从 a 中读取 undefined)。

另外，a bar 中的局部变量不能作为任何对象的属性访问。*

相关:

• How does the “this” keyword work?

---

* 血淋淋的细节:从概念上讲，在规范级别，它是变量环境记录(名义上是对象)中保存的绑定(bind)，用于调用 bar 的执行上下文。 (名义上也是一个对象)，但这是概念上的。我们无法从代码访问环境记录对象或执行上下文对象，并且在给定的实现中，它们可能不存在。