javascript - 函数没有获取更改的变量，它不是全局的吗？

Question

所以我有一个非常简单的测验，由 7 个选择框和一个提交按钮组成。我想要实现的是，如果没有更改任何选择框，并且已更改它们以显示分数，则弹出警告错误。

我设置了一个名为“changed”的变量，该变量是错误的。当这些选择框之一发生更改时，“已更改”变为 true...

这有效，我有一个控制台日志，它显示了它的工作情况，但是当按下提交按钮时，它调用该函数来显示分数或警告，它似乎没有意识到“已更改”已更改为真的。

这是 Jquery...

var changed = false;

$('select').on('change', function () {

var changed = true;
console.log('TRUE');

});

$("#button").click( function(){

var correct = 0;

var selectValue;

var questions = document.getElementsByClassName("question");

var numOfQuestions = questions.length;

for(var i = 0; i < questions.length; i++ ){//begin for loop

//get the value of the select element
selectValue =  questions[i].options[questions[i].selectedIndex].value;

//if the value equals right
if(selectValue === "right"){//begin if then

//increment the correct variable
correct++;

}//end if then

}//end for loop



if(changed === false){
$('#scoreDisplay span').append('WARNING');
}
else{  

$('#scoreDisplay span').append(correct);

}
});

您可以在此处看到它的运行情况，但是当您单击“提交”时，您会看到它仅显示“警告”，无论您是否更改了任何选择框... http://gogeye.com/connectquiz/index.html

Answer 1

此事件处理程序中 var 已更改 的重新定义:

$('select').on('change', function () {

    // creates a new local variable that is only available inside this function
    var changed = true;
    console.log('TRUE');

});

创建一个新的局部变量，“隐藏”和“隐藏”在更高作用域中声明的已更改变量。

从函数内部的变量中删除 var，这样它就不会创建同名的新变量，而只是设置更高作用域的变量:

var changed = false;

$('select').on('change', function () {

    // no var in front of this variable so you are just setting
    // the earlier one, not creating a new one
    changed = true;
    console.log('TRUE');

});

请记住，每当您在函数内使用 var 声明变量时，它都会定义一个仅在该函数内可用的新局部变量。如果它恰好与更高作用域中的变量具有相同的名称，那么它会覆盖该变量名称，并且解释器在您引用它时使用本地变量而不是更高作用域的变量。

Javascript 解释器执行范围搜索来解析变量引用。首先它查看本地范围。如果在那里找到它，那么它就会使用在那里找到的那​​个。如果在那里没有找到，它就会寻找下一个更高的范围。如果在那里找不到，它将上升到更高的范围，直到到达全局范围。因此，它找到的变量名称最接近的范围就是所使用的范围 - 因此将首先使用 var 或 let 定义的局部变量。