ES6语法—块级作用域与函数声明

需要记住的：
ES5不允许在块级作用域声明函数
ES6引入了块级作用域，明确允许块级作用域中声明函数

如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此而产生的不兼容问题，ES6附录B里面规定，浏览器在ES6的环境下可以有自己的行为方式，主要有三个特性
特性① 允许在块级作用域内声明函数
特性② 函数声明类似于var,即会提升到全局作用或函数作用域的头部
特新③ 函数声明还会提升到所在的块级作用域的头部

下面用例子来说明，感受一下三个特性

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 在块级作用域内重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }
  f();// Uncaught TypeError: f is not a function

}());

可以看到上面的代码，在if语句下的代码块进行函数声明，体现了特性①，但是在符合ES6的浏览器中，都会报错，因为实际运行的是下面的代码

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;//特性2
  if (false) {//不执行 
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();// Uncaught TypeError: f is not a function
}());

按照逻辑来说，浏览器会报f is not defined,但是块级作用域内声明的函数，行为类似var声明的变量，所以函数f会进行提升到匿名函数的头部，体现了特性②，相当于var f = undefined，因为if判断条件为false,所以没有重复声明一次函数f，最后浏览器报f is not a function， 最后我们感受一下特性③

// 浏览器的 ES6 环境
if (true) {
    console.log('打印：'+f)
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

根据输出结果，我们可以看出函数缺失提升到了块级作用域的头部

注意

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

// 函数声明语句
{
  let a = 'secret';
  function f() {
    return a;
  }
}
// 函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

注意二、另外，ES6的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错

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

// 报错
'use strict';
if (true)
  function f() {}

注意三、ES5不允许在块级作用域声明函数

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();
}());

ES5 环境在代码的执行是下面这样子的，解析过程中进行了函数提升

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }
  if (false) {
  }
  f();
}());

总结

在块级作用域声明函数，ES5环境下代码会进行函数提升，而ES6环境下，特性②和特性③非常相似，JS解析器解析的时候都进行了提升，不同的是特性②的效果和var变量提升一样，而特性③的效果是函数提升