JavaScript – 使用“let”和“var”在JavaScript中声明变量有什么区别?

ECMAScript 6介绍了该let声明。我听说它被描述为“本地”变量,但我仍然不太确定它与var关键字的行为方式有何不同。

有什么区别?何时应该let使用var


答案

区别在于范围界定。var的范围限定为最近的功能块,let并且范围限定为最近的封闭块,该封闭块可以小于功能块。如果在任何区域之外,两者都是全球

此外,声明的变量let在它们的封闭块中声明之前是不可访问的。如演示中所示,这将引发ReferenceError异常。

演示

全球:

在功能块之外使用它们非常相似。

let me = 'go';  // globally scoped
var i = 'able'; // globally scoped

但是,定义的全局变量let不会作为属性添加到全局window对象上,就像定义的那样var

console.log(window.me); // undefined
console.log(window.i); // 'able'

功能:

在功能块中使用时它们是相同的。

function ingWithinEstablishedParameters() {
    let terOfRecommendation = 'awesome worker!'; //function block scoped
    var sityCheerleading = 'go!'; //function block scoped
}

块:

这是区别。let仅在for()循环var中可见,并且对整个函数可见。

function allyIlliterate() {
    //tuce is *not* visible out here

    for( let tuce = 0; tuce < 5; tuce++ ) {
        //tuce is only visible in here (and in the for() parentheses)
        //and there is a separate tuce variable for each iteration of the loop
    }

    //tuce is *not* visible out here
}

function byE40() {
    //nish *is* visible out here

    for( var nish = 0; nish < 5; nish++ ) {
        //nish is visible to the whole function
    }

    //nish *is* visible out here
}

重声明:

假设严格模式,var将允许您在同一范围内重新声明相同的变量。另一方面,let不会:

'use strict';
let me = 'foo';
let me = 'bar'; // SyntaxError: Identifier 'me' has already been declared
'use strict';
var me = 'foo';
var me = 'bar'; // No problem, `me` is replaced.

let也可用于避免闭包问题。它绑定了新的价值,而不是保留旧的参考,如下面的例子所示。

DEMO

for(var i = 1; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

上面的代码演示了一个典型的JavaScript闭包问题 对i变量的引用存储在单击处理程序闭包中,而不是实际值i

每个单击处理程序都将引用同一个对象,因为只有一个计数器对象可以容纳6,因此每次单击时会得到6个。

一般的解决方法是将其包装在匿名函数中并i作为参数传递。现在也可以通过使用let代替var如下面的代码所示来避免这些问题。

演示(在Chrome和Firefox 50中测试)

'use strict';

for(let i = 1; i < 6; i++) {
  document.getElementById('my-element' + i)
    .addEventListener('click', function() { alert(i) })
}

添加评论

友情链接:蝴蝶教程