JavaScript中的作用域與變量聲明提升

這幾天刷題頻繁碰見變量提升以及作用域問題,這里總結一下

• 先看題 , 思考 : 每次輸出的值是什么

var a = 100
function fun() {
  console.log(a);
  var a = 200;
  console.log(a);
}

fun();
console.log(a);

var a;
console.log(a);

var a = 200;
console.log(a);

for(i = 0;i < 5;i ++) {
  var a = i;
}
console.log(a);

• 緊接着我們來理解什么是變量作用域

  你要了解

  javascript中，是以function為單位。所謂塊級，就是{}花括號括起來為一塊，以function為單位，就是指變量的作用域上限就是當前所在的函數

  變量作用域無非兩種 : 全局變量 和 局部變量

• • 全局變量

  每一個在函數外部聲明或者定義的變量都是一個全局對象，
  所以這個變量可以在任何地方被使用

  var a = "js";
  function ts(){
      console.log(a);
  } 
  ts()
  

• a 為全局變量 , 所以可以在任何地方調用

• • 局部變量

    在一個函數內定義的變量只能在函數內部訪問或者這個函數內部的函數訪問

• • 我們來看例子👍

    • 如果沒有用var關鍵字聲明局部變量，它們就是全局范圍的一部分

    var name = "小明";
    
    function showoneName () {
        console.log (name);
    }
    
    function showtwoName () {    
        name = "小紅"; //並沒有使用var ,所以為全局變量賦值
        console.log (name);
    }
    showoneName (); // 小明
    
    // name 不是局部變量，它只是改變全局名稱變量
    showtwoName (); // 小紅
    
    // 全局變量現在是小紅
    showoneName (); // 小紅
    
    // 解決方法是用var關鍵字聲明您的局部變量
    function users () {
    // 這里，名稱變量是局部變量，它優先於全局變量中的相同名稱變量
        var name = "Jack";
    
    // 試圖在全局范圍內查看函數外部之前，名稱搜索就從函數內部開始
    console.log (name); 
    }
    
    users (); // Jack
    

• 變量的聲明提升

• 當對變量的聲明出現在了相同作用域的靠后的位置的時候，變量的聲明被自動提升到作用域開頭。

  我們一般在聲明變量的時候，會這樣操作：

    var a = 100;
  

  實際上，這個動作完成了三件事：聲明一個變量，定義這個變量的數據類型，賦值（初始化）。

  那么當這個動作出現在同一個作用域的靠后的位置，javascript會把代碼解釋為什么情況呢

    alert(a);
    var a = 100;
  

  事實上 ,會如此解讀

    var a;
    alert(a);
    var a = 100;
  

  所以alert(a)的值為undefined;

• 所謂變量聲明提升，就是被聲明動作如果發生在靠后的位置，會被自動提升到作用域的最前面。

• 例子

      var a = 100;
      console.log(a);
      var a = 200;
      console.log(a);
      function fun2() {
          console.log(a);
          var a = 3;
          console.log(a)
      }
      fun2();
      console.log(typeof a);
  
      var a = function() {}
      console.log(typeof a);
  

  • 上面的代碼 出現多次聲明,我們呀要進行區分每一個a的作用域,然后再進行變量提升

  • 解讀如下

  a = 100;
  alert(a); //輸出100
  
  a = 200;
  alert(a); //輸出200
  
  function fun2() {
      var a;
      alert(a);
      a = 3;
  }
  
  fun2(); // 輸出undefined
  
  alert(typeof a); //輸出 number
  
  a = function(){}
  alert(typeof a); // 輸出 function
  

  • 別忘了
  • 現在回頭看看一開始的,是不是直接就想出答案

• 更多詳情=>🔥唐霜的博客🔥