搜索
您的当前位置:首页正文

千呼万唤始出来-ES6的let和const命令

来源:二三娱乐
本文学自阮大神的 ,文章整理为精简版。

一、let命令

let所声明的变量,只在let命令所在的代码块内有效。就不做过多介绍了。
下面通过for循环来简要说明下let

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

不存在变量提升

简单一句话:若没有let定义变量,那么变量就是未定义的,它所声明的变量一定要在声明后使用,否则报错。

暂时性死区

简单一句话:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
总结为:在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

不允许重复性声明

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

二、块级作用域

为什么需要块级作用域

ES5 只有全局作用域函数作用域,没有块级作用域,这带来很多不合理的场景。

  • 第一种场景,内层变量可能会覆盖外层变量。
  • 第二种场景,用来计数的循环变量泄露为全局变量。
ES6的块级作用域

即代码块,不再赘述,记录一点:块级作用域的出现,实际上使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。

块级作用域与函数声明

ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
上面两种函数声明,根据 ES5 的规定都是非法的
但是,浏览器没有遵守这个规定,为了兼容以前的旧代码,还是支持在块级作用域之中声明函数。
关于ES6的块级作用域与函数声明这里要注意:ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。但是考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

三、const命令

  • const声明一个只读的常量。一旦声明,常量的值就不能改变。
  • const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值
  • const的作用域与let命令相同:只在声明所在的块级作用域内有效。
  • const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
本质

const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

如果真的想将对象冻结,应该使用Object.freeze方法。

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法:var命令和function命令。ES6 除了添加letconst命令,还有另外两种声明变量的方法:import命令class命令。所以,ES6 一共有 6 种声明变量的方法。

四、顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的
顶层对象的属性与全局变量挂钩,被认为是 JavaScript 语言最大的设计败笔之一,原因如下:

  • 没法在编译时就报出变量未声明的错误,只有运行时才能知道(因为全局变量可能是顶层对象的属性创造的,而属性的创造是动态的);
  • 程序员很容易不知不觉地就创建了全局变量(比如打字出错).
  • 顶层对象的属性是到处可以读写的,这非常不利于模块化编程。

ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。也就是说,从 ES6 开始,全局变量将逐步与顶层对象的属性脱钩。

五、global对象

ES5 的顶层对象,本身也是一个问题,因为它在各种实现里面是不统一的。

  • 浏览器里面,顶层对象是window,但 Node 和 Web Worker 没有window。
  • 浏览器和 Web Worker 里面,self也指向顶层对象,但是 Node 没有self。
  • Node 里面,顶层对象是global,但其他环境都不支持。

同一段代码为了能够在各种环境,都能取到顶层对象,现在一般是使用this变量,但是有局限性。

很难找到一种方法,可以在所有情况下,都取到顶层对象。下面是两种勉强可以使用的方法。

// 方法一
(typeof window !== 'undefined'
   ? window
   : (typeof process === 'object' &&
      typeof require === 'function' &&
      typeof global === 'object')
     ? global
     : this);

// 方法二
var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};
如果你想更加深入理解const、let,请移步阮大神的官方博客,看完本章节的内容,附带看下文章末尾美丽的评论,看下大家的关注点在哪里。
Top