javascript - boxSize 泄漏到 globalscope

Question

控制台日志两次，但它只需要显示第一个 console.log(boxSize)

var size = 100;
if (size > 50) {
    var boxSize = size * 5;
    console.log(boxSize);
}
console.log(boxSize);

Answer 1

这是一种在 Javascript 中称为提升的行为。

提升是一种 JavaScript 机制，其中变量和函数声明在代码执行之前被移动到其作用域的顶部。

var在 javascript 中不是块作用域。您可以使用关键字let或const在 ES6 中声明仅对声明它的块可用的变量。

var size = 100;
if (size > 50) {
    let boxSize = size * 5;
    console.log(boxSize);
}
console.log(boxSize);// Uncaught ReferenceError: boxSize is not defined

Answer 2

我建议为此使用 let over var

区别在于范围。var 的范围是最近的功能块，而 let 的范围是最近的封闭块，它可以小于一个功能块。如果在任何块之外，两者都是全局的。

来源：https ://stackoverflow.com/a/11444416/4891666

例子：

var size = 100;

/* Using Var */
if (size > 50) {
  var varExample = size * 5;
  console.log("With var inner: " + varExample);
}
console.log("With var outer: " + varExample);

/* Using Let */
if (size > 50) {
  let letExample = size * 5;
  console.log("With let inner: " + letExample);
}
console.log("With let outer: " + letExample);

Answer 3

let size = 100;
if (size > 50) {
  let boxSize = size * 5;
    console.log(boxSize);
}
console.log(boxSize);
/* Es6 let declers a block scope
  local variable(not function level scope like var)
  */
  //trying to access the variable in the block before the variable declaration resulsts in a ReferenceError