ES6 块级作用域
本文介绍 ES6 中 let、const 的使用、变量提升、暂行性死区、块级作用域,以及函数声明在不同 ES5 和 ES6 下的表现差异

# ES6 块级作用域

# let 与 const

ES5 中声明变量命令只有两种 var 和 function

ES6 中除了 var、function,新增了 let、const、class、import,一共六种

  1. let 是 ES6 新增的声明命令,功能类似于 ES5 中的 var 关键字

  2. let 声明的变量尽在所在代码块内有效

    {
        let a = 0
        var b = 1
    }
    console.log(b) // 1
    console.log(a) // ReferenceError
    // 这表明 let 声明的变量只在它所在的代码块有效
    

    let 命令很适合在 for 循环中使用

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10
    // var 声明的 i,全局有效,每一次循环,新的 i 值都会覆盖旧值,导致最后输出的是最后一轮的 i 的值
    
    var b = [];
    for (let j = 0; j < 10; j++) {
      b[j] = function () {
        console.log(j);
      };
    }
    b[6](); // 6
    // 变量 j 使用 let 声明,当前的 j 只在本轮循环有效,每一次循环的 j 其实都是一个新的变量,所以最后输出的是 6
    
  3. let 命令不允许重复声明

    // SyntaxError
    function test1() {
      let a = 10
      var a = 1
    }
    // SyntaxErrot
    function test2() {
      let a = 10
      let a = 1
    }
    // SyntaxError
    function test3(a) {
        let a = 1
    }
    
  4. 暂行性死区

    // ReferenceError
    console.log(a)
    let a = 0
    

    同一代码块中,使用 let 命令声明的变量,不能在声明之前使用,会报引用错误

    代码块中,变量声明前,该变量不可用,语法上称之为暂行性死区(temporal dead zone,简称 TDZ)

  5. const 和 let 作用和特性类似,只在当前代码块有效,不能重复声明

    const 声明时必须赋初值,且不可改变其值

    const a = 1
    a = 2 // TypeError
    const b // SyntaxError
    
  6. let、const 变量提升

    下面代码 let 重复声明会报语法错误,但在报错之前 console.log 不能正常输出

    说明存在变量提升

    let a = 1
    console.log(a)
    let a = 2 // SyntaxError
    

    但是由于暂行性死区的存在,我们无法在声明之前使用变量

    console.log(a) // undefined
    console.log(b) // ReferenceError
    
    var a = 2
    let b = 2
    

    注:变量的定义分为创建 -> 初始化为 undefined -> 赋值三个阶段

    let 的创建过程被提升,但是初始化没有提升

    var 的创建和初始化被提升

    function 的创建、初始化和赋值都被提升

# 块级作用域

  1. ES5 中只有全局作用域和函数作用域

    // 全局作用域
    var a = 0
    
    function test() {
        // 函数作用域
        var a = 1
    }
    

    存在的问题

    var a = 0
    function test() {
        console.log(a)
        if(false) {
            var a = 1
        }
    }
    test() // undefined
    
    

    函数作用域下中 if 中 var a 命令变量提升,导致 a 为 undefined

  2. ES6 中规定 {} 内部为一个独立的块级作用域

    外层代码块不受内层代码块的影响

    外层作用域无法读取内层作用域的变量

    内层作用域可以定义外层作用域的同名变量

    {{
      let a = 0
      {
          let a = 1
          {
              console.log(a) // 报错
          }
      }
    }}
    
  3. 块级作用域的出现让广泛运用的的立即执行函数不再必要

    // IIFE 写法
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }
    

# 函数声明

  1. ES5 规定函数只能在全局作用域和函数作用域中声明

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

    以上为非法的声明,但是为了兼容旧代码,浏览器没有遵守此规定,可以运行,不会报错,但是严格模式下会报错

    // ES5 严格模式
    'use strict';
    if (true) {
      function fn() {}
    }
    // 报错
    
  2. ES6 引入块级作用域,明确允许可以在块级作用域声明函数

    // ES6 严格模式
    'use strict';
    if (true) {
      function fn() {}
    }
    // 不报错
    
  3. ES6 规定块级作用域中的函数声明,无法在作用域外引用

    function fn() { 
        console.log('outside') 
    }
    (function () {
      if (false) {
        // 重复声明一次函数
        function fn() { 
            console.log('inside')
        }
      }
      fn()
    }())
    

    在 ES5 中会打印出 inside,因为 if 块里面的 fn 被提升到自执行函数头部

    在 ES6 中则打印出 outside,因为在 if 块内声明的 fn,作用域外无法访问,只能执行外部声明的 fn

    由于行为差异较大,ES6 规定浏览器可以不遵守该项,有自己的行为方式

    1. 允许在块级作用域内声明函数
    2. 函数声明类似于 var,即提升到全局作用域或函数作用域的头部
    3. 同时,函数声明会提升到所在的块级作用域的头部

    上面示例代码在 chrome 环境中可能会报错,因为实际运行的代码如下

    function fn() { 
        console.log('outside') 
    }
    (function () {
      var fn = undefined
      if (false) {
        function fn() { 
            console.log('inside')
        }
      }
      fn()
    }())
    // Uncaught TypeError: fn is not a function
    
Comment here, be cool~

Copyright © 2020 CadeCode

Theme 2zh powered by VuePress

本页访问次数 0

Loading