使用“ let”和“ var”有什么区别?

2020/09/13 17:32 · javascript ·  · 0评论

ECMAScript 6引入了该let声明

我听说它被描述为一个local变量,但是我仍然不太确定它的行为与var关键字的不同

有什么区别?什么时候应该let代替var

范围规则

主要区别是作用域规则。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();

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

另一个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: 3funcs[j]();由于匿名函数绑定到同一变量,因此每次调用时都会输出到控制台

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

吊装

虽然用var关键字声明的变量吊起undefined在运行代码之前用初始化),这意味着即使在声明它们之前,也可以在其封闭范围内访问它们:

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

run();

let变量只有在评估其定义后才会初始化。在初始化之前访问它们会导致ReferenceError从块的开始直到初始化处理之前,变量都处于“临时死区”中。

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

checkHoisting();

创建全局对象属性

在顶层let,与不同var,不会在全局对象上创建属性:

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

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

重新声明

在严格模式下,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

let也可以用来避免关闭问题。它将绑定新的值,而不是保留旧的参考,如下面的示例所示。

for(var i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p> 
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

上面的代码演示了经典的JavaScript关闭问题。i变量的引用存储在点击处理程序闭包中,而不是的实际值i

每个单击处理程序都将引用相同的对象,因为只有一个计数器对象包含6个,因此每次单击将获得6个。

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

(在Chrome和Firefox 50中测试)

for(let i=1; i<6; i++) {
  $("#div" + i).click(function () { console.log(i); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Clicking on each number will log to console:</p> 
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>

let之间有什么区别var

  • var语句的开始就知道在整个函数中使用语句定义的变量(*)
  • let语句定义的那一刻起,仅在定义语句的块中才知道使用语句定义的变量(**)

要了解差异,请考虑以下代码:

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

在这里,我们可以看到我们的变量j仅在第一个for循环中已知,而在之前和之后都不知道。但是,我们的变量i在整个函数中是已知的。

另外,请考虑在声明块范围变量之前不知道它们,因为它们没有被提升。您也不允许在同一块中重新声明相同的块范围变量。这使得块范围的变量比全局变量或功能范围的变量更不容易出错,全局变量或功能范围的变量被提升并且在有多个声明的情况下不会产生任何错误。


let今天使用安全吗?

有人会说,将来我们只会使用let语句,而var语句将变得过时。JavaScript专家凯尔•辛普森Kyle Simpson)了一篇非常详细的文章,阐述了为什么他认为情况并非如此

但是,今天绝对不是这种情况。实际上,我们实际上需要问自己使用该let语句是否安全该问题的答案取决于您的环境:

  • 如果您正在编写服务器端JavaScript代码(Node.js),则可以安全地使用该let语句。

  • 如果您正在编写客户端JavaScript代码并使用基于浏览器的编译器(例如Traceurbabel-standalone),则可以安全地使用该let语句,但是就性能而言,代码可能不是最佳选择。

  • 如果您正在编写客户端JavaScript代码并使用基于Node的编译器(例如traceur shell脚本Babel),则可以安全地使用该let语句。并且由于您的浏览器仅会知道已转译的代码,因此应限制性能方面的弊端。

  • 如果您正在编写客户端JavaScript代码并且不使用翻译器,则需要考虑浏览器支持。

    仍然有些浏览器根本不支持let

在此处输入图片说明


如何跟踪浏览器支持

用于将上行的最新概述哪些浏览器支持let在你阅读这个答案时声明,请参阅Can I Use


(*)因为提升了 JavaScript变量,所以可以在声明全局和功能范围的变量之前对其进行初始化和使用这意味着声明始终在作用域的顶部。

(**)不提升块范围的变量

下面是一个在解释let的关键字一些例子。

let工作非常像var主要区别在于var变量的范围是整个封闭函数

Wikipedia上的此表显示哪些浏览器支持Javascript 1.7。

请注意,只有Mozilla和Chrome浏览器支持它。IE,Safari和其他可能没有的。

可接受的答案遗漏了一点:

{
  let a = 123;
};

console.log(a); // ReferenceError: a is not defined

let

块范围

使用let关键字声明的变量是块作用域的,这意味着它们仅在声明它们可用

在顶层(功能外部)

在顶层,使用声明的变量let不会在全局对象上创建属性。

var globalVariable = 42;
let blockScopedVariable = 43;

console.log(globalVariable); // 42
console.log(blockScopedVariable); // 43

console.log(this.globalVariable); // 42
console.log(this.blockScopedVariable); // undefined

函数内部

在函数内部(但在块外部),let具有与相同的作用域var

(() => {
  var functionScopedVariable = 42;
  let blockScopedVariable = 43;

  console.log(functionScopedVariable); // 42
  console.log(blockScopedVariable); // 43
})();

console.log(functionScopedVariable); // ReferenceError: functionScopedVariable is not defined
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

块内

let在块内使用声明的变量不能在该块外访问。

{
  var globalVariable = 42;
  let blockScopedVariable = 43;
  console.log(globalVariable); // 42
  console.log(blockScopedVariable); // 43
}

console.log(globalVariable); // 42
console.log(blockScopedVariable); // ReferenceError: blockScopedVariable is not defined

循环内

letin循环声明的变量只能在该循环内部引用。

for (var i = 0; i < 3; i++) {
  var j = i * 2;
}
console.log(i); // 3
console.log(j); // 4

for (let k = 0; k < 3; k++) {
  let l = k * 2;
}
console.log(typeof k); // undefined
console.log(typeof l); // undefined
// Trying to do console.log(k) or console.log(l) here would throw a ReferenceError.

带闭环

如果使用let而不是var循环使用,则每次迭代都会获得一个新变量。这意味着您可以安全地在循环内使用闭包。

// Logs 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

// Logs 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}

时间死区

由于存在临时死区let因此在声明之前无法访问使用声明的变量尝试这样做会引发错误。

console.log(noTDZ); // undefined
var noTDZ = 43;
console.log(hasTDZ); // ReferenceError: hasTDZ is not defined
let hasTDZ = 42;

无需重新声明

您不能使用多次声明相同的变量let您也无法使用let使用声明的另一个变量具有相同标识符的声明变量var

var a;
var a; // Works fine.

let b;
let b; // SyntaxError: Identifier 'b' has already been declared

var c;
let c; // SyntaxError: Identifier 'c' has already been declared

const

const非常类似于let-它具有块范围并且具有TDZ。但是,有两件事是不同的。

无需重新分配

使用声明的变量const无法重新分配。

const a = 42;
a = 43; // TypeError: Assignment to constant variable.

请注意,这并不意味着该值是不可变的。它的属性仍然可以更改。

const obj = {};
obj.a = 42;
console.log(obj.a); // 42

如果您想要一个不可变的对象,则应使用Object.freeze()

需要初始化器

使用声明变量时,必须始终指定一个值const

const a; // SyntaxError: Missing initializer in const declaration

这是两者之间差异的示例(刚刚开始支持chrome):
在此处输入图片说明

如您所见,var j变量仍然具有for循环范围(Block Scope)之外的值,但是let i变量在for循环范围之外未定义。

"use strict";
console.log("var:");
for (var j = 0; j < 2; j++) {
  console.log(j);
}

console.log(j);

console.log("let:");
for (let i = 0; i < 2; i++) {
  console.log(i);
}

console.log(i);

有一些细微的差异- let作用域的行为与变量作用域在某种程度上与其他语言差不多。

例如,它的作用域为封闭的块,它们在声明之前不存在,等等。

但是,值得注意的是,这let只是较新的Javascript实现的一部分,并且具有不同程度的浏览器支持

主要区别是范围的区别,而let只能在声明范围内使用,例如在for循环中,例如var可以在循环外部访问。MDN中的文档中(也有MDN的示例):

let允许您声明范围仅限于使用它的块,语句或表达式的变量。这与var关键字不同,该关键字在全局范围内或整个函数本地定义变量,而不管块范围如何。

let声明的变量将定义它们的块以及任何包含的子块作为其范围。这样,让我们的工作非常像var主要区别在于var变量的范围是整个封闭函数:

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}`

在程序和函数的顶层,letvar不同,不会在全局对象上创建属性。例如:

var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

在块内使用时,让该变量的作用域限制在该块内。请注意var之间的区别,var的范围在声明它的函数内部。

var a = 1;
var b = 2;

if (a === 1) {
  var a = 11; // the scope is global
  let b = 22; // the scope is inside the if-block

  console.log(a);  // 11
  console.log(b);  // 22
} 

console.log(a); // 11
console.log(b); // 2

另外,别忘了它的ECMA6功能,因此尚未得到完全支持,因此最好始终使用Babel等将其转换为ECMA5。有关访问babel网站的更多信息

从最基本的角度来说

for (let i = 0; i < 5; i++) {
  // i accessible ✔️
}
// i not accessible ❌

for (var i = 0; i < 5; i++) {
  // i accessible ✔️
}
// i accessible ✔️

⚡️沙盒玩↓

编辑let vs var

  • 可变不吊装

    let不会葫芦他们出现在块的整个范围。相比之下,var可能葫芦如下。

    {
       console.log(cc); // undefined. Caused by hoisting
       var cc = 23;
    }
    
    {
       console.log(bb); // ReferenceError: bb is not defined
       let bb = 23;
    }

    其实,每@Bergi,两者varlet高挂

  • 垃圾收集

    块范围的let作用与关闭和垃圾回收有关,可以回收内存。考虑,

    function process(data) {
        //...
    }
    
    var hugeData = { .. };
    
    process(hugeData);
    
    var btn = document.getElementById("mybutton");
    btn.addEventListener( "click", function click(evt){
        //....
    });

    click处理程序回调并不需要hugeData在所有的变量。从理论上讲,process(..)运行,可以对巨大的数据结构hugeData进行垃圾回收。但是,某些JS引擎仍可能必须保留这种庞大的结构,因为该click函数在整个作用域内都是封闭的。

    但是,块作用域可以使这种庞大的数据结构被垃圾回收。

    function process(data) {
        //...
    }
    
    { // anything declared inside this block can be garbage collected
        let hugeData = { .. };
        process(hugeData);
    }
    
    var btn = document.getElementById("mybutton");
    btn.addEventListener( "click", function click(evt){
        //....
    });
  • let 循环

    let在循环中可以将其重新绑定到循环的每个迭代中,并确保从上一个循环迭代结束时重新为其分配值。考虑,

    // print '5' 5 times
    for (var i = 0; i < 5; ++i) {
        setTimeout(function () {
            console.log(i);
        }, 1000);  
    }

    但是,替换varlet

    // print 1, 2, 3, 4, 5. now
    for (let i = 0; i < 5; ++i) {
        setTimeout(function () {
            console.log(i);
        }, 1000);  
    }

    因为let使用这些名称为a)初始化程序表达式b)每次迭代创建一个新的词法环境(之前是评估增量表达式),所以这里有更多详细信息

区别在于每个变量声明的变量范围

实际上,范围差异会带来许多有用的后果:

  1. let变量仅在其最接近的封闭块({ ... })中可见
  2. let变量仅在声明该变量发生的代码行中可用(即使它们已吊起!)。
  3. let变量可以不被随后的重新声明varlet
  4. 全局let变量不会添加到全局window对象。
  5. let变量很容易与闭包一起使用(它们不会引起竞争条件)。

由于let降低了变量的可见性而施加了限制,并增加了提早发现意外的名称冲突的可能性。这样可以更轻松地跟踪和推断变量,包括变量的可达性(帮助回收未使用的内存)。

因此,let在大型程序中使用变量或以新的出乎意料的方式组合独立开发的框架时变量不太可能引起问题。

var如果您确定要在循环中使用闭包(#5)或在代码中声明外部可见的全局变量时(#4),则可能仍然有用。var如果export迁移到转译程序空间之外并转移到核心语言,则可以代替用于出口

例子

1.在最近的封闭块外不使用:
此代码块将引发引用错误,因为对的第二次使用
x发生在用声明的块外let

{
    let x = 1;
}
console.log(`x is ${x}`);  // ReferenceError during parsing: "x is not defined".

相比之下,具有相同示例的var作品。

2.声明前不使用:

此代码块将
ReferenceError在代码运行前抛出,因为在声明之前使用了该代码x

{
    x = x + 1;  // ReferenceError during parsing: "x is not defined".
    let x;
    console.log(`x is ${x}`);  // Never runs.
}

相反,具有var解析和运行功能的同一示例没有抛出任何异常。

3.不重新声明:
以下代码演示了用声明的变量
let以后可能不会重新声明:

let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

4.不属于以下人员的全局变量window

var button = "I cause accidents because my name is too common.";
let link = "Though my name is common, I am harder to access from other JS files.";
console.log(link);  // OK
console.log(window.link);  // undefined (GOOD!)
console.log(window.button);  // OK

5.易于与闭包
配合
使用:声明的变量与
var循环内的闭包配合使用效果不佳。这是一个简单的循环,输出变量i在不同时间点的值序列

for (let i = 0; i < 5; i++) {
    console.log(`i is ${i}`), 125/*ms*/);
}

具体来说,这将输出:

i is 0
i is 1
i is 2
i is 3
i is 4

在JavaScript中,我们通常在比创建变量晚得多的时间使用变量。当我们通过将传递给闭包的输出延迟来演示这一点时setTimeout

for (let i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

...只要我们坚持使用,输出就不会改变let相反,如果我们var i改为使用

for (var i = 0; i < 5; i++) {
    setTimeout(_ => console.log(`i is ${i}`), 125/*ms*/);
}

...循环意外输出“ i为5”五次:

i is 5
i is 5
i is 5
i is 5
i is 5

这是一个示例,可以补充其他人已经写的内容。假设您要创建一个函数数组adderFunctions,其中每个函数都使用一个Number参数,并返回参数和该函数在数组中的索引的和。尝试adderFunctions使用var关键字生成循环不会像某些人天真的期望那样起作用:

// An array of adder functions.
var adderFunctions = [];

for (var i = 0; i < 1000; i++) {
  // We want the function at index i to add the index to its argument.
  adderFunctions[i] = function(x) {
    // What is i bound to here?
    return x + i;
  };
}

var add12 = adderFunctions[12];

// Uh oh. The function is bound to i in the outer scope, which is currently 1000.
console.log(add12(8) === 20); // => false
console.log(add12(8) === 1008); // => true
console.log(i); // => 1000

// It gets worse.
i = -8;
console.log(add12(8) === 0); // => true

上面的过程无法生成所需的函数数组,因为i的范围超出了for在其中创建每个函数的迭代范围取而代之的是,在循环结束时i,每个函数的闭包中in引用i循环中末尾中每个匿名函数的值(1000)adderFunctions这根本不是我们想要的:我们现在在内存中拥有1000个不同功能的数组,它们的行为完全相同。并且如果我们随后更新的值i,突变将影响所有的adderFunctions

但是,我们可以使用let关键字再次尝试

// Let's try this again.
// NOTE: We're using another ES6 keyword, const, for values that won't
// be reassigned. const and let have similar scoping behavior.
const adderFunctions = [];

for (let i = 0; i < 1000; i++) {
  // NOTE: We're using the newer arrow function syntax this time, but 
  // using the "function(x) { ..." syntax from the previous example 
  // here would not change the behavior shown.
  adderFunctions[i] = x => x + i;
}

const add12 = adderFunctions[12];

// Yay! The behavior is as expected. 
console.log(add12(8) === 20); // => true

// i's scope doesn't extend outside the for loop.
console.log(i); // => ReferenceError: i is not defined

这次i是在循环的每次迭代中反弹for现在,每个函数i在创建函数时都会保留其值,并且adderFunctions行为符合预期。

现在,图像混合的两种行为,你可能会看到它为什么不建议混合新letconst与旧var在同一个脚本。这样做可能会导致一些令人困惑的代码。

const doubleAdderFunctions = [];

for (var i = 0; i < 1000; i++) {
    const j = i;
    doubleAdderFunctions[i] = x => x + i + j;
}

const add18 = doubleAdderFunctions[9];
const add24 = doubleAdderFunctions[12];

// It's not fun debugging situations like this, especially when the
// code is more complex than in this example.
console.log(add18(24) === 42); // => false
console.log(add24(18) === 42); // => false
console.log(add18(24) === add24(18)); // => false
console.log(add18(24) === 2018); // => false
console.log(add24(18) === 2018); // => false
console.log(add18(24) === 1033); // => true
console.log(add24(18) === 1030); // => true

不要让这种情况发生在您身上。使用短绒。

注意:这是一个教学示例,旨在演示循环中var/ let行为以及具有易于理解的函数闭包。这将是添加数字的糟糕方法。但是在其他情况下,在现实世界中可能会遇到在匿名函数闭包中捕获数据的通用技术。YMMV。

可能以下两个功能显示出差异:

function varTest() {
    var x = 31;
    if (true) {
        var x = 71;  // Same variable!
        console.log(x);  // 71
    }
    console.log(x);  // 71
}

function letTest() {
    let x = 31;
    if (true) {
        let x = 71;  // Different variable
        console.log(x);  // 71
    }
    console.log(x);  // 31
}

let 很有趣,因为它允许我们执行以下操作:

(() => {
    var count = 0;

    for (let i = 0; i < 2; ++i) {
        for (let i = 0; i < 2; ++i) {
            for (let i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

结果是计数[0,7]。

鉴于

(() => {
    var count = 0;

    for (var i = 0; i < 2; ++i) {
        for (var i = 0; i < 2; ++i) {
            for (var i = 0; i < 2; ++i) {
                console.log(count++);
            }
        }
    }
})();

仅计数[0,1]。

功能VS块范围:

var之间的主要区别在于let用声明的变量var函数范围的而用声明的函数let块作用域的例如:

function testVar () {
  if(true) {
    var foo = 'foo';
  }

  console.log(foo);
}

testVar();  
// logs 'foo'


function testLet () {
  if(true) {
    let bar = 'bar';
  }

  console.log(bar);
}

testLet(); 
// reference error
// bar is scoped to the block of the if statement 

变量var

当第一个函数testVar被调用时,用声明的变量foo var仍可在if语句外部访问该变量foo函数范围内的任何地方可用testVar

变量let

testLet调用第二个函数时,用声明的变量bar let只能在if语句内部访问因为变量与声明的let块作用域(其中块是大括号中的代码例如if{}for{}function{})。

let 变量不被悬挂:

var之间的另一个区别let是声明为with的变量let 不会被吊起一个示例是说明此行为的最佳方法:

的变量let 不会被吊起:

console.log(letVar);

let letVar = 10;
// referenceError, the variable doesn't get hoisted

的变量var 确实被吊起:

console.log(varVar);

var varVar = 10;
// logs undefined, the variable gets hoisted

全局let不隶属于window

let在全局范围内声明为的变量(该代码不在函数中)不会作为属性添加到全局window对象上。例如(此代码在全局范围内):

var bar = 5;
let foo  = 10;

console.log(bar); // logs 5
console.log(foo); // logs 10

console.log(window.bar);  
// logs 5, variable added to window object

console.log(window.foo);
// logs undefined, variable not added to window object

什么时候应该let用完var

使用letvar,只要你能,因为它只是范围的更具体。这样可以减少在处理大量变量时可能发生的命名冲突。var当您希望将全局变量显式地放在window对象上时可以使用

看起来,至少在Visual Studio 2015 TypeScript 1.5中,“ var”允许在块中使用相同变量名的多个声明,而“ let”则不允许。

这不会产生编译错误:

var x = 1;
var x = 2;

这将:

let x = 1;
let x = 2;

var 是全局范围(可提升)变量。

let并且const是块作用域。

test.js

{
    let l = 'let';
    const c = 'const';
    var v = 'var';
    v2 = 'var 2';
}

console.log(v, this.v);
console.log(v2, this.v2);
console.log(l); // ReferenceError: l is not defined
console.log(c); // ReferenceError: c is not defined

使用时 let

let关键字附加的变量声明到任何块(通常是范围{ .. }它包含在对)。换句话说,let隐含劫持块的其变量声明范围。

let无法在window对象中访问变量,因为无法全局访问它们。

function a(){
    { // this is the Max Scope for let variable
        let x = 12;
    }
    console.log(x);
}
a(); // Uncaught ReferenceError: x is not defined

使用时 var

var ES5中的变量具有函数作用域,这意味着变量在函数内部有效,而在函数本身外部无效。

var变量可以在window对象中访问,因为它们不能全局访问。

function a(){ // this is the Max Scope for var variable
    { 
        var x = 12;
    }
    console.log(x);
}
a(); // 12

如果您想了解更多,请继续阅读下面的内容

对范围最有名的面试问题,人们也可以足够精确的使用letvar如下;

使用时 let

for (let i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 0 to 9, that is literally AWW!!!
        }, 
        100 * i);
}

这是因为使用时let,对于每次循环迭代,变量都具有作用域并具有自己的副本。

使用时 var

for (var i = 0; i < 10 ; i++) {
    setTimeout(
        function a() {
            console.log(i); //print 10 times 10
        }, 
        100 * i);
}

这是因为使用时var,对于每次循环迭代,变量都具有作用域并具有共享副本。

如果我没看错规范,那么let 值得庆幸的是,也可以利用它来避免用于模拟仅私有成员的自调用函数 - 一种流行的设计模式,它降低了代码的可读性,使调试复杂化,没有增加真正的代码保护或其他好处-除了可能满足某人的要求之外对语义的渴望,所以停止使用它。/ rant

var SomeConstructor;

{
    let privateScope = {};

    SomeConstructor = function SomeConstructor () {
        this.someProperty = "foo";
        privateScope.hiddenProperty = "bar";
    }

    SomeConstructor.prototype.showPublic = function () {
        console.log(this.someProperty); // foo
    }

    SomeConstructor.prototype.showPrivate = function () {
        console.log(privateScope.hiddenProperty); // bar
    }

}

var myInstance = new SomeConstructor();

myInstance.showPublic();
myInstance.showPrivate();

console.log(privateScope.hiddenProperty); // error

请参阅“ 模拟专用接口

一些技巧let

1。

    let statistics = [16, 170, 10];
    let [age, height, grade] = statistics;

    console.log(height)

2。

    let x = 120,
    y = 12;
    [x, y] = [y, x];
    console.log(`x: ${x} y: ${y}`);

3。

    let node = {
                   type: "Identifier",
                   name: "foo"
               };

    let { type, name, value } = node;

    console.log(type);      // "Identifier"
    console.log(name);      // "foo"
    console.log(value);     // undefined

    let node = {
        type: "Identifier"
    };

    let { type: localType, name: localName = "bar" } = node;

    console.log(localType);     // "Identifier"
    console.log(localName);     // "bar"

的getter和setter方法let

let jar = {
    numberOfCookies: 10,
    get cookies() {
        return this.numberOfCookies;
    },
    set cookies(value) {
        this.numberOfCookies = value;
    }
};

console.log(jar.cookies)
jar.cookies = 7;

console.log(jar.cookies)

下面显示了'let'和'var'在范围上的区别:

let gfoo = 123;
if (true) {
    let gfoo = 456;
}
console.log(gfoo); // 123

var hfoo = 123;
if (true) {
    var hfoo = 456;
}
console.log(hfoo); // 456

gfoo,通过定义let最初是在全球范围内,而当我们声明gfoo里面又if clause范围变化,当一个新的值赋给变量该范围内它不会影响全局范围。

hfoo,定义的by var最初位于全局范围内,但是当我们在内声明它时if clause,它将再次考虑全局范围hfoo,尽管再次使用var声明了它。当我们重新分配它的值时,我们看到全局范围hfoo也受到了影响。这是主要区别。

ES6引入了两个新的关键字(letconst)替代var

当需要块级减速时,可以使用let和const代替var。

下表总结了var,let和const之间的区别

在此处输入图片说明

let是es6的一部分。这些功能将以简单的方式说明差异。

function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

让vs var。这一切都与范围有关

var变量是全局变量,基本上可以在任何地方访问,而let变量不是全局变量,仅在右括号将其杀死之前存在。

请参见下面的示例,并注意lion(let)变量在两个console.logs中的行为不同。它在第二个console.log中超出范围。

var cat = "cat";
let dog = "dog";

var animals = () => {
    var giraffe = "giraffe";
    let lion = "lion";

    console.log(cat);  //will print 'cat'.
    console.log(dog);  //will print 'dog', because dog was declared outside this function (like var cat).

    console.log(giraffe); //will print 'giraffe'.
    console.log(lion); //will print 'lion', as lion is within scope.
}

console.log(giraffe); //will print 'giraffe', as giraffe is a global variable (var).
console.log(lion); //will print UNDEFINED, as lion is a 'let' variable and is now out of scope.

正如刚才提到的:

区别在于范围。var范围仅限于最近的功能块let范围仅限于最近的封闭块,后者可小于功能块。如果在任何块之外,两者都是全局的。让我们看一个例子:

范例1:

在我的两个示例中,我都有一个函数myfuncmyfunc包含一个myvar等于10 的变量。在我的第一个示例中,我检查是否myvar等于10(myvar==10)。如果是,我会myvar使用var关键字声明一个变量 (现在我有两个myvar变量),并为其分配一个新值(20)。在下一行中,我在控制台上打印其值。在条件块之后,我再次myvar在控制台上打印的值如果查看的输出myfuncmyvar则其值等于20。

让关键字

例2:
在第二个示例中
var,我没有在条件块中使用keyword,而是声明myvar使用letkeyword。现在,当我打电话时,myfunc 我得到两个不同的输出:myvar=20myvar=10

因此,区别非常简单,即范围。

现在,我认为使用let以下语句对语句块进行更好的范围界定

function printnums()
{
    // i is not accessible here
    for(let i = 0; i <10; i+=)
    {
       console.log(i);
    }
    // i is not accessible here

    // j is accessible here
    for(var j = 0; j <10; j++)
    {
       console.log(j);
    }
    // j is accessible here
}

我认为人们以后将开始在这里使用let,以便他们在JavaScript中具有与其他语言,Java,C#等类似的作用域。

对JavaScript的作用域了解不清的人过去常常会犯错误。

不支持使用进行吊装let

通过这种方法,可以消除JavaScript中存在的错误。

请参阅ES6深度:let和const可以更好地理解它。

本文明确定义了var,let和const之间的区别

const 是表示不会重新分配标识符的信号。

let表示可以重新分配变量的信号,例如循环中的计数器或算法中的值交换。它还表示该变量将仅在其定义的块中使用,而该块并不总是整个包含函数。

var现在是在JavaScript中定义变量时可用的最弱信号。可能会或可能不会重新分配该变量,并且该变量可能会或可能不会用于整个功能,或仅出于块或循环的目的。

https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75#.esmkpbg9b

我想将这些关键字链接到执行上下文,因为执行上下文在所有这些方面都很重要。执行上下文具有两个阶段:创建阶段和执行阶段。此外,每个执行上下文都具有可变环境和外部环境(其词法环境)。

在执行上下文的创建阶段,var,let和const仍将其变量以给定执行上下文的变量环境中的未定义值存储在内存中。区别在于执行阶段。如果在分配值之前使用引用使用var定义的变量,则它将是未定义的。没有例外。

但是,在声明之前,不能引用用let或const声明的变量。如果尝试在声明它之前使用它,则在执行上下文的执行阶段将引发异常。现在,根据执行上下文的创建阶段,该变量仍将保留在内存中,但是引擎不允许您使用它:

function a(){
    b;
    let b;
}
a();
> Uncaught ReferenceError: b is not defined

使用var定义的变量,如果引擎无法在当前执行上下文的变量环境中找到该变量,则它将在作用域链(外部环境)中向上移动,并在外部环境的变量环境中检查该变量。如果在此处找不到它,它将继续搜索范围链。let和const并非如此。

let的第二个特点是它引入了块作用域。块由花括号定义。示例包括功能块,if块,for块等。当在块内部使用let声明变量时,该变量仅在块内部可用。实际上,每次运行该块时,例如在for循环内,它将在内存中创建一个新变量。

ES6还引入了const关键字来声明变量。const也是块作用域的。let和const之间的区别在于,必须使用初始化程序声明const变量,否则它将产生错误。

最后,当涉及到执行上下文时,使用var定义的变量将附加到“ this”对象。在全局执行上下文中,它将是浏览器中的窗口对象。let或const并非如此。

我认为术语和大多数示例有点让人不知所措,我个人与之不同的主要问题是了解什么是“阻止”。在某种程度上,我意识到,一个块将是除IF声明以外的任何花括号{函数或循环的左括号将定义一个新块,其中定义的任何内容在同一事物(函数或循环)let的右括号后将不可用}考虑到这一点,更容易理解:

let msg = "Hello World";

function doWork() { // msg will be available since it was defined above this opening bracket!
  let friends = 0;
  console.log(msg);

  // with VAR though:
  for (var iCount2 = 0; iCount2 < 5; iCount2++) {} // iCount2 will be available after this closing bracket!
  console.log(iCount2);
  
    for (let iCount1 = 0; iCount1 < 5; iCount1++) {} // iCount1 will not be available behind this closing bracket, it will return undefined
  console.log(iCount1);
  
} // friends will no be available after this closing bracket!
doWork();
console.log(friends);
本文地址:http://javascript.askforanswer.com/shiyong-lethe-varyoushenmequbie.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!