在回调中保留变量范围

Question

鉴于下面的脚本，我预计第一次打开对话框时，var2 会在 open 回调后立即未定义，但第二次它会被设置为 123。不是这种情况，它总是未定义的。为什么？

然后我取消注释var2=111;没有变化？？？ JavaScript不是线性执行的吗？显然不完全是因为它不知何故 "knew" var2 将在此回调中本地定义。我的解释正确吗？

然后我将 var var2 = 123; 更改为 var2 = 123;，一切正常。

var var1=321;
// var2=111;
var dialog = $('#dialog').dialog({
    autoOpen: false,
    open: function (event, ui) {
        console.log(var1, var2);
        var var2 = 123;
    },
});
$('#open').click(function () {
    dialog.dialog('open');
});

<div id="dialog"></div>
<button id="open">Open</button>

Answer 1

您的 fiddle 中的代码几乎等于以下代码：

var var1=321;
var dialog = $('#dialog').dialog({
    autoOpen: false,
    open: function (event, ui) {
        var var2; // variable-hoisting
        console.log(var1, var2);
        var2 = 123; //gets initialized only here
    },
});
$('#open').click(function () {
    dialog.dialog('open');
});

如您所见，变量 var2 被提升到函数体的顶部，并且在技术上 undefined 在您记录它的下一行中。您在登录后为其分配一个值。尝试在记录之前分配它时，看看它会记录什么。您会得到正确的值。

并且由于您是在 open 函数内声明变量，因此该变量不会持续存在，并且会在每次执行时重新声明给您相同的结果。

在回调中保留变量范围

Perserving variable scope in callback

javascript

variables

closures

namespaces

callback