lazyken

# 块级作用域

在 ES6 之前，ES 的作用域只有 2 种：全局作用域和函数作用域。

相较于其他语言则都普遍支持块级作用域。块级作⽤域就是使⽤⼀对⼤括号包裹的⼀段代码，⽐如函数、判断语句、循环语句，甚⾄单独的⼀个 {} 都可以被看作是⼀个块级作⽤域。

简单来讲，如果⼀种语⾔⽀持块级作⽤域，那么其代码块内部定义的变量在代码块外部是访问不到的，并且等该代码块中的代码执⾏完成之后，代码块中定义的变量会被销毁。

ES6 引入了 let 和 const 关键字，JavaScript 也有了块级作用域。当代码块中存在 let 或 const，这个代码块就成为了块级作用域。

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

// 第一种写法，报错
if (true) let x = 1;
// Uncaught SyntaxError: Lexical declaration cannot appear in a single-statement context

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

# let & const

  • let 或者 const 声明的变量只在 let 或 const 命令所在的代码块内有效。

  • 不存在变量提升：不同于 var，在 let 或 const 之前访问不到它们定义的变量，会报错（Uncaught ReferenceError: bar is not defined）。

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

  • 不允许重复声明：在同一个作用域中，let 和 const 都不允许重复声明同一个变量。因此，不能在函数内部重新声明参数（但是可以在函数中的代码块中声明和函数参数同名的变量，因为这时是在块级作用域中声明的，是单独的作用域）。

  • const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值。只声明不赋值，就会报错。

# 块级作用域与函数声明

ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明。

// 情况一
if (true) {
  function f() {}
}
// 情况二
try {
  function f() {}
} catch (e) {
  // ...
}

但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数，因此上面两种情况实际都能运行，不会报错。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。

function f() {
  console.log('I am outside!');
}
(function() {
  // f提升到函数作用域头部，f = undefined
  if (false) {
    // 重复声明一次函数f
    // f提升到所在的块级作用域的头部，f=function(){...}
    function f() {
      console.log('I am inside!');
    }
  }

  f();
})();

上面代码在 ES5 中运行，会得到“I am inside!”，因为在 if 内声明的函数 f 会被提升到函数头部。

ES6 规定，块级作用域之中，函数声明语句的行为类似于 let，在块级作用域之外不可引用。
但是改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B 里面规定，浏览器的实现可以不遵守上面的规定，有自己的行为方式 (opens new window)：

  • 允许在块级作用域内声明函数。
  • 函数声明类似于 var，即会提升到全局作用域或函数作用域的头部。
  • 同时，函数声明还会提升到所在的块级作用域的头部。

# ES6 声明变量的六种方法

var、function、let、const、import、class

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

# 顶层对象属性

顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。即全局变量自动成为顶层对象的属性。

window.a = 1;
a; // 1

a = 2;
window.a; // 2

ES6 中，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

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

let b = 1;
window.b; // undefined