為什么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正在創建一個全局變量，它在全局對象上創建並存儲為屬性 ，因此與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();