14. 提升

由 jimjing123 创建, 最后一次修改 2016-02-24
  • 14.1 var 声明会被提升至该作用域的顶部,但它们赋值不会提升。let 和 const 被赋予了一种称为「暂时性死区(Temporal Dead Zones, TDZ)」的概念。这对于了解为什么 type of 不再安全相当重要。

    // 我们知道这样运行不了 
    // (假设 notDefined 不是全局变量)
    function example() {
      console.log(notDefined); // => throws a ReferenceError
    }
    
    // 由于变量提升的原因,
    // 在引用变量后再声明变量是可以运行的。
    // 注:变量的赋值 `true` 不会被提升。
    function example() {
      console.log(declaredButNotAssigned); // => undefined
      var declaredButNotAssigned = true;
    }
    
    // 编译器会把函数声明提升到作用域的顶层,
    // 这意味着我们的例子可以改写成这样:
    function example() {
      let declaredButNotAssigned;
      console.log(declaredButNotAssigned); // => undefined
      declaredButNotAssigned = true;
    }
    
    // 使用 const 和 let
    function example() {
      console.log(declaredButNotAssigned); // => throws a ReferenceError
      console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
      const declaredButNotAssigned = true;
    }
  • 14.2 匿名函数表达式的变量名会被提升,但函数内容并不会。

    function example() {
      console.log(anonymous); // => undefined
    
      anonymous(); // => TypeError anonymous is not a function
    
      var anonymous = function() {
        console.log('anonymous function expression');
      };
    }
  • 14.3 命名的函数表达式的变量名会被提升,但函数名和函数函数内容并不会。

    function example() {
      console.log(named); // => undefined
    
      named(); // => TypeError named is not a function
    
      superPower(); // => ReferenceError superPower is not defined
    
      var named = function superPower() {
        console.log('Flying');
      };
    }
    
    // the same is true when the function name
    // is the same as the variable name.
    function example() {
      console.log(named); // => undefined
    
      named(); // => TypeError named is not a function
    
      var named = function named() {
        console.log('named');
      }
    }
  • 14.4 函数声明的名称和函数体都会被提升。

    function example() {
      superPower(); // => Flying
    
      function superPower() {
        console.log('Flying');
      }
    }
  • 想了解更多信息,参考 Ben Cherry 的 JavaScript Scoping & Hoisting
以上内容是否对您有帮助:
二维码
建议反馈
二维码