使用let / block作用域的实际优势是什么?

时间:2016-11-03 05:36:00

标签: ecmascript-6 let

我似乎无法看到使用let的实际优势。当然,如果我有for循环,我会使用let i = 0而不是var i = 0,而i现在属于for循环块的范围。但这真的有利吗?我的意思是我可以使用var并让变量具有函数范围访问权限,但只是不使用它我不需要的地方?阻止范围界定有什么好处?

我理解var和let之间的区别,我想要更加一致地理解let的特殊优势。

1 个答案:

答案 0 :(得分:5)

您已经提到了一个优点:在循环中阻止范围。这避免了defining functions inside a loop的问题,我认为这是JavaScript新手的最大陷阱之一:

// With var
var elements = document.querySelectorAll('.var');
for (var i = 0; i < elements.length; i++) {
  elements[i].onclick = function() {
    console.log("I'm element #" + (i + 1) + ".");
  };
}

// With let
elements = document.querySelectorAll('.let');
for (let i = 0; i < elements.length; i++) {
  elements[i].onclick = function() {
    console.log("I'm element #" + (i + 1) + ".");
  };
}
<h3>With <code>var</code></h3>
<div class="var">Click me!</div>
<div class="var">Click me!</div>

<h3>With <code>let</code></h3>
<div class="let">Click me!</div>
<div class="let">Click me!</div>

另一个优点是默认情况下不会初始化let个变量。这使得在更高范围内尝试访问具有相同名称的变量时更容易捕获错误:

// With `var`, we get `undefined` which can be tricky to debug in more
// complex code.
var foo = 42;

function bar() {
  console.log(foo); // undefined
  var foo = 21;
}
bar();

// With `let`, we get a ReferenceError, which makes it clear that we made
// a mistake here.
var foo = 42;

function bar() {
  console.log(foo); // ReferenceError
  let foo = 21;
}
bar();

总而言之,这使JavaScript与其他语言的工作方式更加一致。