ES6变量声明及其作用域

人生浅薄
145 阅读6分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

ES6 声明变量的六种方法

ES5 只有两种声明变量的方法：var、function

ES6 共有六种声明变量的方法：var、function、let、const、import、class

let 命令

  • 块级作用域
  • 不存在变量提升
  • 暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的（即使代码块父级作用域已经定义）。
  • 不允许重复声明：let命令不允许在相同作用域内，重复声明同一个变量。

const 命令

  • 只读变量，一旦声明，变量值就不能改变。这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
  • 块级作用域
  • 不存在变量提升
  • 暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的（即使代码块父级作用域已经定义）。
  • 不允许重复声明：let命令不允许在相同作用域内，重复声明同一个变量。

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

// 常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
​
const foo = {};
​
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop; // 123
​
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
​
const a = [];
a.push("Hello"); // 可执行
a.length = 0; // 可执行
a = ["Dave"]; // 报错

块级作用域

为什么需要块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，所以有很多不合理的场景

  1. 内层变量可能会覆盖外层变量
// 由于变量提升的原因导致内层的tmp覆盖了外层的tmp
var tmp = new Date();
​
function f() {
  console.log(tmp);
  if (false) {
    var tmp = "hello world";
  }
}
​
f(); // undefined
  1. 用于计数的循环变量泄露为全局变量
// 变量i只用来控制循环，但循环结束后它并没有消失，而泄露成了全局变量；
var s = "hello";
​
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
​
console.log(i); // 5

ES6 的块级作用域

let和const实际上为 JavaScript 新增了块级作用域。

ES6 允许块级作用域任意嵌套。每一层都是一个单独的作用域，外层作用域无法读取内层作用域的变量。块级作用域的出现实际上取代了匿名立即执行函数表达式。

{
  {
    {
      {
        {
          let insane = "Hello World";
        }
        console.log(insane); // 报错
      }
    }
  }
}

需要特别注意的是，在ES6中的switch/case语法，它的块级作用域并非每个case一个块级作用域，而是整个switch被认为是一个块级作用域，所以需要避免在case中定义变量，否则可能会出现变量引用问题。

块级作用域与函数声明

ES5 中规定函数只能在顶层作用域和函数作用域中声明，不能在块级作用域声明。但浏览器为了兼容以前的代码，还是在支持在块级作用域之中声明函数。

ES6 中引入了块级作用域，明确允许在块级作用域中声明函数。块级作用域中，函数声明语句的行为类似let，在块级作用域之外不可引用。

注意： 如果改变了块级作用域内声明的函数的处理规则，会对老代码产生很大的影响。为了减轻因此产生的不兼容问题，ES6 规定，浏览器的实现可不遵守上面的规定，有自己的行为方式：

  • 允许在块级作用域内声明函数
  • 函数声明方式类似var，即会提升到全局作用域或函数作用域头部

考虑到环境导致的行为差异太大，所以应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

注意 ES6 块级作用域必须要有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

严格模式下，let、const、function，都只能声明在当前作用域的顶层。

// 第一种写法，报错
if (true) let x = 1;
​
// 第二种写法，不报错
if (true) {
  let x = 1;
}

// 不报错
"use strict";
if (true) {
  function f() {}
}
​
// 报错
("use strict");
if (true) function f() {}

顶层对象的属性

顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。

ES5 之中，顶层对象的属性与全局变量是等价的。顶层对象的属性赋值和全局变量的赋值是同一件事

window.a = 1;
a; // 1
​
a = 2;
window.a; // 2

注意：顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。这样的设计带来了几个很大的问题。

  1. 首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）；
  2. 其次，程序员很容易不知不觉地就创建了全局变量（比如打字出错）；
  3. 最后，顶层对象的属性是到处可以读写的，这非常不利于模块化编程。
  4. 另一方面，window 对象有实体含义，指的是浏览器的窗口对象，顶层对象是一个有实体含义的对象，也是不合适的。

ES6 为了改变这一点，一方面规定，为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a; // 1
​
let b = 1;
window.b; // undefined

综上

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

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

avatar
文章
阅读
粉丝