Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
415 views
in Technique[技术] by (71.8m points)

javascript - 使用“ let”和“ var”有什么区别?(What's the difference between using “let” and “var”?)

ECMAScript 6 introduced the let statement .

(ECMAScript 6引入let语句 。)

I've heard it that it's described as a "local" variable, but I'm still not quite sure how it behaves differently than the var keyword.

(我听说它被描述为“局部”变量,但是我仍然不太确定它的行为与var关键字有何不同。)

What are the differences?

(有什么区别?)

When should let be used over var ?

(什么时候应该let在使用var ?)

  ask by TM. translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Scoping rules(范围规则)

Main difference is scoping rules.

(主要区别是作用域规则。)

Variables declared by var keyword are scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

(var关键字声明的变量的作用域范围是立即函数主体(因此,函数作用域),而let变量的作用域范围是由{ }表示的直接封闭块(因此,块作用域)。)

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar);

  {
    let baz = "Bazz";
    console.log(baz);
  }

  console.log(baz); // ReferenceError
}

run();

The reason why let keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

(将let关键字引入该语言的原因是函数范围令人困惑,并且是JavaScript中错误的主要来源之一。)

Take a look at this example from another stackoverflow question :

(从另一个stackoverflow问题看这个示例:)

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

My value: 3 was output to console each time funcs[j]();

(My value: 3每次funcs[j]();都输出到控制台My value: 3 funcs[j]();)

was invoked since anonymous functions were bound to the same variable.

(由于匿名函数绑定到同一变量,因此被调用。)

People had to create immediately invoked functions to capture correct value from the loops but that was also hairy.

(人们必须创建立即调用的函数以从循环中捕获正确的值,但这也很麻烦。)

Hoisting(吊装)

While variables declared with var keyword are "hoisted" to the top of the block which means they are accessible in their enclosing scope even before they are declared:

(尽管使用var关键字声明的变量被“提升”到块的顶部,这意味着即使在声明它们之前,也可以在其封闭范围内访问它们:)

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

let variables are not initialized until their definition is evaluated.

(在评估其定义之前,不初始化let变量。)

Accessing them before the initialization results in a ReferenceError .

(在初始化之前访问它们会导致ReferenceError 。)

Variable said to be in "temporal dead zone" from the start of the block until the initialization is processed.

(从块的开始到初始化处理之前,变量都处于“临时死区”。)

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

Creating global object property(创建全局对象属性)

At the top level, let , unlike var , does not create a property on the global object:

(在顶层, letvar不同,不会在全局对象上创建属性:)

var foo = "Foo";  // globally scoped
let bar = "Bar"; // globally scoped

console.log(window.foo); // Foo
console.log(window.bar); // undefined

Redeclaration(重新声明)

In strict mode, var will let you re-declare the same variable in the same scope while let raises a SyntaxError.

(在严格模式下, var使您可以在同一范围内重新声明相同的变量,而let引发SyntaxError。)

'use strict';
var foo = "foo1";
var foo = "foo2"; // No problem, 'foo' is replaced.

let bar = "bar1";
let bar = "bar2"; // SyntaxError: Identifier 'bar' has already been declared

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...