为什么JSfiddle和Chrome控制台会返回相同功能的不同值？

Question

我在JSfiddle中有以下代码。

var a = 1;

function five() {
    this.a = 5;
    console.log(a); //JSfiddle prints the value 1
}

five()

但是当我在Chrome控制台中粘贴完全相同的代码时，函数five()会打印5.为什么？

Answer 1

默认情况下，JSFiddle将您的代码包装在window.onload事件中，因此您实际上正在运行此代码：

window.onload = function() {

    var a = 1;

    function five() {
        this.a = 5;
        console.log(a); //JSfiddle prints the value 1
    }

    five()

}

这意味着a是该函数的本地，而this仍然引用全局对象（window）。在Chrome控制台中，如果没有包装功能，var a正在创建一个created and stored as properties on the global object的全局变量，因此与window.a / this.a相同。

如果您转到JavaScript选项并选择“nowrap”选项之一，它也会在JSFiddle中记录5：

Answer 2

我会以这种方式编写代码，使其“无处不在”

var obj = {};
obj.a = 1;
obj.foo = function five() {
    this.a = 5;
    window.alert(this.a);  
}

obj.foo();