關於javascript中變數及函式的提升

可可西里的驕傲發表於2019-05-08
JavaScript變數函式

javascript中變數以及函式的提升，在我們平時的專案中其實還是挺常用的，尤其是大型專案中，不知不覺就會順手新增一些變數，而有時候自己的不小心就會釀成一些不必要錯誤，趁有時間整理一下自己對於js中變數及函式提升的理解。

首先，看一個題目：

    console.log(a); // undefined
    var a = 1;
    console.log(a);  // 1

    console.log(b());
    function b(){return 2;}  // 2

    console.log(c)  //報錯
    let c = 4;
    console.log(d())  // 報錯 
    var d = function(){return 3;}  // 報錯
    (function(){
        var m = n = 1;
    })()
    console.log(m)  //報錯
    console.log(n)  // 1

上面的例項對於javascript變數及函式提升的可謂是淋漓盡致...

一、javascript 變數的提升

-函式及變數的宣告都將被提升到函式的最頂部

-變數可以在使用後宣告，也就是變數可以先使用再宣告

敲黑板，劃重點，是變數的宣告，宣告，宣告，當變數或函式已經初始化之後，就不會提升到函式的最頂部。這裡上面的變數a已經初始化了，所以第一個console取不到變數a得值，為undefined；

注意：變數的提升只會提升到當前作用域下

二、javascript函式的提升

而函式b僅僅是先宣告瞭一個函式方法，函式c是函式表示式無法提升，所以在嚴格模式下b=2；d報錯

對於m,n，這裡就涉及到javascript作用域的問題

首先，var m = n = 1的執行順序是什麼？並不是我們大多數人心中所想的連續賦值，javascript的賦值是從右向左的，而是 n=1;var m = n;很好，一目瞭然，在函式作用域內的變數m=n，n是全域性變數，最後嚴格模式下輸出結果，n=1，m報錯；

三、關於es6兩個關鍵字——let和const

let 宣告的變數只在 let 命令所在的程式碼塊內有效，不存在變數的提升

const 宣告一個只讀的常量，一旦宣告，常量的值就不能改變。一旦宣告必須初始化，否則就會報錯

來個對比很明顯的栗子（完美的體現出let命令只在程式碼塊內有效的意思）：

{
 let test = 2;
 var web = 'font';
}
console.log(test); // 報錯
console.log(web); // font

再次回到上面的題目，c就是報錯的

ES6 明確規定，程式碼塊內如果存在 let 或者 const，程式碼塊會對這些命令宣告的變數從塊的開始就形成一個封閉作用域。程式碼塊內，在宣告變數 PI 之前使用它會報錯。

var PI = "a";
if(true){
  console.log(PI);  // 報錯，即使函式外面全域性宣告瞭PI，但在程式碼塊內還是會報錯
  const PI = "3.1415926";
}

以上，就是關於javascript中變數提升的理解。

 

相關文章