JavaScript'this'让我疯狂

Question

我经常使用Visualize来确定范围,函数调用站点等等,同时我推进了我的JS学习escalade.最近我碰到了这个:

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

var a = 2;

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

bar();

谷歌Chrome在控制台中给了我一个2,而我期待一个5(foo的呼叫网站).有趣的是,pythongtutor(当然在JS下)给了我一个未定义的错误信息,如下所示:

我有两个问题:

1. 为什么结果是2而不是5,因为调用foo的站点是在a中为5的bar.
2. 为什么pythontutor标记和错误？

Answer 1

1)为什么结果是2而不是5,因为foo的调用站点位于a为5的bar内.

调用的网站this在JavaScript中没有任何效果.如何调用函数以及如何定义函数(例如,它是绑定函数,箭头函数,还是只是简单的函数或方法)都是重要的.

2)为什么pythontutor flaggin和错误？

因为在严格模式下,这将是一个错误.

当你这样做时:

foo();

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

另外,a局部变量in bar不能作为任何对象的属性访问.*

有关:

• "this"关键字如何运作？

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