JavaScripts之变量作用域提升问题(var、let、const)

  • 变量提升(Hoisting)
    1. var: 使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它,这种行为称为Hoisting(提升)

    注意:变量赋值的位置不会改变

      function fn() {
         console.log(x) // -> undefined
         var x = 2  
      }
      // 等同于:
      function fn() {
        var x // 变量提升到函数最顶部
        console.log(x)
        x = 2 // 赋值的位置不变
      }
    
    1. let/const: 使用 let/const 定义变量是存在块级作用域({...})的,它同样存在变量提升,但是由于有临时死区的概念,导致变量在未初始化的时候是不能够使用的(所以看上去是没有变量提升的)
      function fn() {
        console.log(x) // 报错 ->  Cannot access 'name' before initialization
        // var -> let 使得 x 存在临时死区,在未初始化之前是无法被使用的
        let x = 2
      }
      // 正确方式
      function fn() {
        let x = 2 // 定义并初始化
        console.log(x) // -> 2
      }
    
  • 变量的作用域
    var:只存在函数作用域和全局作用域
      // 使用 var 在函数外部定义变量,会提升到全局作用域
      var globalA = c
      function fn() {
        if(true) {
          // 会在函数顶部定义 a = undefind, 所以在下方的console.log中能够正常输出
          // 这里其实是 a = 1 赋值的步骤
          var a = 1
        }
    
        console.log(a) // -> 1
      }
    
    const/let: 局部作用域({ ... })
      console.log(curA) // -> Cannot access 'curA' before initialization
      // 只能在初始化后才能使用 curA
      const curA = 'ccc'
      console.log(curA) // -> 'ccc'
      function fn() {
        if(true) {
          console.log(a) // a is not defined
        }
        let a = 1
      }
    
posted @ 2021-04-30 17:26  C+V-Engineer  阅读(139)  评论(0编辑  收藏  举报