jquery - `$("non_existing_element");` 在控制台中返回 `[ ]`，但在控制台中作为变量调用时返回 `ReferenceError`

Question

$(document).ready(function(){
  var someVar = $("non_existing_element");
});

在浏览器控制台中

> $("non_existing_element");
[]

但

> someVar
ReferenceError: someVar is not defined

为什么以这种方式实施？someVar如果调用也返回[]或者至少两个调用都返回相同的东西，那会不会更有意义？

score 1 · Accepted Answer

30 90 秒关于变量范围

$(document).ready(function(){
  var someVar = $("non_existing_element");
});

在这一点上，someVar确实，实际上等于[]。所以如果你要写：

$(document).ready(function(){
  var someVar = $("non_existing_element");
  console.log("the value of someVar is", someVar);
});

您会在控制台中看到

someVar 的值为 []

万岁！

但！

一旦你通过最后一个花括号......

$(document).ready(function(){
  var someVar = $("non_existing_element");
}); // <<<<< This one

您已经离开了由定义的函数function() {}。注意，它没有名字，所以这被称为匿名函数。别担心，它没有针对政治或经济的仇杀。

离开函数后，用定义的变量将var不再可访问。这是为了防止范围泄漏，这是另一个完整的对话，我相信您很快就会了解它。尝试在没有var. 走着瞧吧。

不使用var将允许变量逃脱可悲的匿名函数的控制，并在您的全局范围内自行处理。（顺便说一句，可以通过访问window.global_variable）

因此，当您在控制台中键入变量时（如果您使用的是breakpoints则不适用），将从您的全局范围读取变量，因为您不在任何函数中。而且由于我们刚刚发现var将变量范围限定为您不在的函数，我们现在知道为什么它未定义。

我的意思是，想象一下如果只有一个变量名为checkbox! 您放入的每个 Javascript 插件都会相互冲突。没有人会知道发生了什么checkbox，在你知道之前，你的 DOM 中正在发生疯狂的事情。

故事的寓意：确定变量的范围。了解你的变量。爱你的变量。