ES6的块级作用域

101 阅读2分钟

function f1() {

    let n = 5;

    if (true) {

      let n = 10;

    }

    console.log(n); // 5

  }

\

  块级作用域的出现,实际上使得获得广泛应用的匿名立即执行函数表达式(匿名 IIFE)不再必要了。

    // IIFE 写法

    (function () {

        var tmp = ...;

        ...

    }());

    

    // 块级作用域写法

    {

        let tmp = ...;

        ...

    }


\

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

\

(function () {

  if (false) {

    // 重复声明一次函数f

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

  }

\

  f();

}());

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

\

// ES5 环境

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

\

(function () {

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

  if (false) {

  }

  f();

}());

\

而在es6环境中:

// 浏览器的 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

\

浏览器的 ES6 环境中,块级作用域内声明的函数,行为类似于var声明的变量。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境

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

(function () {

  var f = undefined;

  if (false) {

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

  }

\

  f();

}());

// Uncaught TypeError: f is not a function

\

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

\

// 块级作用域内部的函数声明语句,建议不要使用

{

  let a = 'secret';

  function f() {

    return a;

  }

}

\

// 块级作用域内部,优先使用函数表达式

{

  let a = 'secret';

  let f = function () {

    return a;

  };

}

\

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

\

// 第一种写法,报错

if (true) let x = 1;

\

// 第二种写法,不报错

if (true) {

  let x = 1;

}

\

第一种写法没有大括号,所以不存在块级作用域,而let只能出现在当前作用域的顶层,所以报错。第二种写法有大括号,所以块级作用域成立。

\

函数声明也是如此,严格模式下,函数只能声明在当前作用域的顶层。

\

// 不报错

'use strict';

if (true) {

  function f() {}

}

\

// 报错

'use strict';

if (true)

  function f() {}