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

Question

I have the following code in JSfiddle .

var a = 1;

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

five()

But when I paste the same exact code inside Chrome console, the function five() prints 5. Why?

Answer 1

By default JSFiddle wraps your code in the window.onload event, so you're actually running this:

window.onload = function() {

    var a = 1;

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

    five()

}

That means that a is local to that function, while this still refers to the global object ( window ). In the Chrome console, without the wrapper function, var a is creating a global variable, which are created and stored as properties on the global object , and is thus the same as window.a / this.a .

If you go to the JavaScript options and choose either of the "nowrap" options, it will log 5 in JSFiddle too:

Answer 2

I would write the code this way to make it work 'everywhere'

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

obj.foo();