js變量提升和函數提升

變量,作爲編程語言最基礎的部分,每種語言的變量不盡相同,但又大徑相庭。大部分編程語言的變量有塊級作用域,如if、for、while... 但JavaScript不純在塊級作用域,而是函數作用域,並且有自己獨有的特性--變量提升。(ES6新添加的let、const使其可以用塊級作用域)

  對於函數的變量訪問時遵循作用域鏈的,即當前函數運行時會有一個當前作用域,當飲用某個變量時,會先查找當前作用域內是否存在該變量的定義,如果不存在則根據作用域鏈向上去查找父函數的作用域,有則拿來使用,沒有則繼續向上直到全局作用域。關於作用域鏈這裏就不仔細描述,簡單而言,類似原型鏈,從全局函數直到當前函數的作用域存在一種相互包含的關係,子可以向上訪問,但是父不可以向下訪問子函數的變量,這樣層層嵌套的關係鏈。

作用鏈域如下:

複製代碼

var num = 10;

  function a (){
    console.log(num);
  }

  a() ;   //結果alert(10),a函數作用域裏沒有num 所以向上查找外層的作用域,有且等於10所以彈出10而不是undefined.

複製代碼

 

變量的提升:

複製代碼

var num = 10;

  function a (){
       //var num;    console.log(num);
    var num = 11; //num = 11;  }

     a();    // undefined

複製代碼

這段代碼中,function a(){}裏的var num = 11;就拆分等價於被註釋掉的藍色部分,這就是變量提升--所有的變量都事先被提升到所屬函數作用域的頭部聲明。

 

再來看看有關函數形參的問題,第一段代碼稍加改動:

複製代碼

var num = 10;

  function a (num){
    console.log(num);  
  }   a() ;   //結果undefined,a函數作用域定義形參num,由於沒賦值,所以爲undefined

複製代碼

 

函數的提升:

函數的聲明方式有倆種:函數聲明和函數表達式,在函數提升方面會有所不同

 

  函數聲明的函數提升:

複製代碼

console.log(fn);  //function fn(){console.log(1);}
function fn(){    console.log(1); }

等同下面一段代碼:
function fn(){
    console.log(1);
}

console.log(fn);  //function fn(){console.log(1);}

複製代碼

函數聲明中,聲明的函數整體被提升到作用域最頂部。

 

  函數表達式的函數提升:

複製代碼

console.log(fn);  // undefined

var fn = function (){
          console.log(1);
     }

等同下面一段代碼:
var fn;
console.log(fn); // undefined

fn = function (){
  console.log(1);
}

複製代碼

函數表達式中,類似於上面講的變量提升,var出來的變量被提到作用域最頂部聲明。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章