ES6中let命令

来源:互联网 发布:知乎注册 不用手机号 编辑:程序博客网 时间:2024/06/03 16:36

let命令

基本用法

for (let i = 10; i >= 0; i--) {    console.log(i+'------');}console.log(i);//用let 报错console.log(i);            ^ReferenceError: i is not defined//用var。却可以展示10------9------8------7------6------5------4------3------2------1------0-------1//相同的报错{    let i = 100;    var b = 199;}console.log(i); //报错console.log(b);

在下面的代码中输出的是10

var a = [];for (var i = 0; i < 10; i++) {  a[i] = function () {    console.log(i);  };}a[6](); // 10

这不是我们想要的。
原因的话,当function去内存里面拿i的时候,i已经变成了 10 。采取的办法是加一个作用域。

var a = [];for (var i = 0; i < 10; i++) {    (function(i){         a[i] = function () {            console.log(i);          };    })(i);//生成一个作用域,把i传进去。}a[6](); // 6//写一个好懂的吧var a = [];for (var i = 0; i < 10; i++) {    var j = i;    (function(j){         a[i] = function () {            console.log(j);          };    })(j);}a[9](); 

再来看看le t,声明的变量仅在块级作用域内有效,最后输出的是6

var a = [];for (let i = 0; i < 10; i++) {     a[i] = function () {        console.log(i);      };}a[6](); //6

上面代码中,变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。你可能会问,如果每一轮循环的变量i都是重新声明的,那它怎么知道上一轮循环的值,从而计算出本轮循环的值?这是因为 JavaScript 引擎内部会记住上一轮循环的值,初始化本轮的变量i时,就在上一轮循环的基础上进行计算。

另外,for循环还有一个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

不存在的变量提升

// var 的情况console.log(foo); // 输出undefinedvar foo = 2;// let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;

变量foo用var命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量bar用let命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

暂时性死区

只要块级作用域内存在 let 命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

var tmp = 123;if (true) {  tmp = 'abc'; // ReferenceError  let tmp;}

上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)

if (true) {  // TDZ开始  tmp = 'abc'; // ReferenceError  console.log(tmp); // ReferenceError  let tmp; // TDZ结束  console.log(tmp); // undefined  tmp = 123;  console.log(tmp); // 123}

在let命令声明变量tmp之前,都属于变量tmp的“死区”。

“暂时性死区”也意味着typeof不再是一个百分之百安全的操作

typeof x; // ReferenceErrorlet x;

上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError。

作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。

typeof undeclared_variable // "undefined"

上面代码中,undeclared_variable是一个不存在的变量名,结果返回“undefined”。所以,在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。

有些“死区”比较隐蔽,不太容易发现。

function bar(x = y, y = 2) {  return [x, y];}bar(); // 报错

上面代码中,调用bar函数之所以报错(某些实现可能不报错),是因为参数x默认值等于另一个参数y,而此时y还没有声明,属于”死区“。如果y的默认值是x,就不会报错,因为此时x已经声明了。

// 不报错var x = x;// 报错let x = x;// ReferenceError: x is not defined

上面代码报错,也是因为暂时性死区。使用let声明变量时,只要变量在还没有声明完成前使用,就会报错。上面这行就属于这个情况,在变量x的声明语句还没有执行完成前,就去取x的值,导致报错”x 未定义“。

ES6 规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在 ES5 是很常见的,现在有了这种规定,避免此类错误就很容易了。

总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

不允许重复声明

let不允许在相同作用域内,重复声明同一个变量。

// 报错function () {  let a = 10;  var a = 1;}// 报错function () {  let a = 10;  let a = 1;}

因此,不能在函数内部重新声明参数。

function func(arg) {  let arg; // 报错}function func(arg) {  {    let arg; // 不报错  }}

声明:内容转自阮一峰大神的《ECMAScript 6 入门》这个书!!!有兴趣的可以买来看看

原创粉丝点击