關於JS變量提升的一些坑

function log(str) {
   // 本篇文章所有的打印都將調用此方法
   console.log(str);
}

 

函數聲明和變量聲明總是會被解釋器悄悄地被“提升”到方法體的最頂部

變量聲明、命名、提升

在JS中， 變量有4種基本方式進入作用域：

• 語言內置： 所有的作用域里都有this和arguments；(需要注意的是arguments在全局作用域是不可見的)
• 形式參數： 函數的形式參數會作為函數體作用域的一部分；
• 函數聲明： 像這種形式： function foo() {}；
• 變量聲明： 像這樣： var foo；

 

變量提升

 

function test1() {
      a = 5;
      log(a); 
      log(window.a); 
      var a = 10;
      log(a); 
    }
    test1();

依次會輸出 5 、undefined 、10   因為在解析時候是等價於

var a;
a=5;
log(a);
log(window.a);
a=10;
log(a);

 接着看另外一個例子：

function test2() {
   var a = 1;
   var b = 2;
   var c = 3;
}
/*test2中的語句，是這樣被執行的  這個時候就把變量提升了
    
 8     function test2(){
      var a,b,c;   
      var a = 1;
      var b = 2;
      var c = 3; 
    }
     */

只有函數級作用域，if語句不會有：test3():

function test3(){
  var a = 1;
  log(a);      // 1 
  if (true) {
    var a = 2;
    log(a);    //2 
  }
  log(a);      // 2 
}

 

函數的提升

我們寫JS的時候，通常會有兩種寫法：

• 函數表達式 var fn=function fn(){}
• 函數聲明方式 function fn(){}

我們需要重點注意的是，只有函數聲明形式才能被提升。
變量賦值並沒有被提升，只是聲明被提升了。但是，函數的聲明有點不一樣，函數體也會一同被提升

function test3() {
   fn();
   function fn() {
     log("我來自fn");
   }
 }
 test3();
 function test4() {
   fn(); // fn is not a function
   var fn = function fn() {
     alert("我來自 fn  test4");
   }
 }
 test4();

 

 

函數表達式需要注意的

• 在function內部，fn完全等於fn1
• 在function外面，fn1則是 not defined

function test5() {
      var fn = function fn1() {
        log(fn === fn1); // true
        log(fn == fn1); // true
      }
      fn();
      log(fn === fn1); // fn1 is not defined
      log(fn == fn1);  // fn1 is not defined
    }
    test5();

!兼容
// b();
// var a = function b() {alert('this is b')};
// 則ie下是可以執行b的. 說明不同瀏覽器在處理函數表達式細節上是有差別的.

 

補充一點函數表達式

定義里面的指定的函數名是不是被提升的

function text7() {
  a(); // TypeError "a is not a function" 
  b();
  c(); // TypeError "c is not a function" 
  d(); // ReferenceError "d is not defined"

  var a = function() {};    // a指向匿名函數 
  function b() {};          // 函數聲明 
  var c = function d() {};  // 命名函數，只有c被提升，d不會被提升。

  a();
  b();
  c();
  d(); // ReferenceError "d is not defined"
}
text7();

 

大家先看下面一段代碼test6，思考一下會打印什么？

function text6() {
   var a = 1;
   function b() {
     a = 10;
      return;
      function a() {}
    }
    b();
    log(a);         //  ？
}
text6();

||

||

||

|| 輸出在下面

||

||

||

||

||

||

what? 什么鬼？為什么是1？
這里需要注意的是，在function b()中，
var = a // function 類型的
a=10; // 重新把10復制給a，  此時的a是function b()中的內部變量
return;
function a() {} // 不會被執行

所以，外面輸出的a 依舊是最開始定義的全局變量

 

函數的聲明比變量的聲明的優先級要高

function text6() {
  function a() {}
  var a;
  log(a);                //打印出a的函數體

  var b;
  function b() {}
  log(b);                 //打印出b的函數體 

  // ！注意看，一旦變量被賦值后，將會輸出變量
  var c = 12
  function c() {}
  log(c);                 //12
  
  function d() {}
  var d = 12
  log(d);                //12
}
text6();

 

變量解析的順序

一般情況下，會按照最開始說的四種方式依次解析

• 語言內置：
• 形式參數： 
• 函數聲明： 
• 變量聲明： 

 也有例外：

• 內置的名稱arguments表現得很奇怪，看起來應該是聲明在形參之后，但是卻在聲明之前。這是說，如果形參里面有arguments，它會比內置的那個優先級高。所以盡可能不要在形參里面使用arguments；
• 在任何地方定義this變量都會出語法錯誤
• 如果多個形式參數擁有相同的名稱，最后的那個優先級高，即便是實際運行的時候它的值是undefined；

 

CAO！這么多坑，以后腫么寫代碼？

用var定義變量。對於一個名稱，在一個作用域里面永遠只有一次var聲明。這樣就不會遇到作用域和變量提升問題。

ECMAScript參考文檔關於作用域和變量提升的部分：
    如果變量在函數體類聲明，則它是函數作用域。否則，它是全局作用域（作為global的屬性）。變量將會在執行進入作用域的時候被創建。塊(比如if(){})不會定義新的作用域，只有函數聲明和全局性質的代碼(單個JS文件)才會創造新的作用域。變量在創建的時候會被初始化為undefined。如果變量聲明語句里面帶有賦值操作，則賦值操作只有被執行到的時候才會發生，而不是創建的時候。

 

最后，

由於時間倉促,demo有很多不足之處，多諒解。