技術標籤：JavaScriptjavascriptjs

JavaScript——變數作用域

在js中，var定義的變數實際是有作用域的，假設在函式體中宣告，則在函式體外不可使用（如果要使用，可以用閉包）

測試：

function text(){
  var i = 1;
  i = i+1;
}
i = i+2;//報錯：Uncaught ReferenceError: i is not defined

• 兩個函式可以使用相同的變數名，只要在函式內部，就不會衝突

 function text(){
          var i = 1
          i = i+1
        }
 

      
         function text1(){
          var i = 2
          i = i+3
        }

• 內部函式可以訪問外部函式的變數，但反之不可以

function text(){
          var i = 1;
          console.log(i);

             function text1(){
          var m = i+2;
          console.log(m);
        }
      var n = m+1;
text1()
}
text()

• 假設內部函式變數和外部函式變數重名

測試：

function pc(){
          var i = 1;
             function pc1(){
          var i = 'A';
          console.log('inner' +i);//outer1
        }
      console.log('outer'+i);//innerA
pc1()
}
pc()

在js中，函式查詢變數從自身函式開始，是由“內”向“外”查詢，假設外部存在同名的函式變數，則內部函式會遮蔽外部函式的變數

• 提升變數的作用域

 function pc(){
        var x = 'x'+
 
y;//提升了y的作用域
        console.log(x)
        var y = 'y';       
}
pc()

結果：xundefined

說明：js執行引擎自動提升了y的作用域宣告，但沒有提升y的賦值，所以結果中y的值才是undefined

規範：把所有的變數都定義在函式的頭部，便於程式碼的維護

function pc(){
        var x =1,
            y =2,
            z,m,n//未賦值的都是undefined，最後一個不用逗號
     //定義之後隨便用                       
}

全域性作用域var

全域性變數

//全域性變數
var x = 1;
        function pc(){
        console.log(x)
}
console.log(x)
pc()

全域性物件window：預設的所有的全域性變數都會繫結在window物件上

var x = 1;
alert(x);
window.alert(x);//結果出現兩次彈窗，說明alert()這個函式也是window變數

測試：

 var x = 1;
      window.alert(x);
       var old_alert = window.alert;
       //old_alert(x);
       window.alter = function(){
       };
       window.alter(2);//發現此時alter()失效了，被old_alert()掩蓋了

      window.alert = old_alert; //恢復
      window.alert(x);

javascript實際上只有一個全域性作用域，任何變數（函式也可視作變數），假設沒有在函式範圍內找到，就會向外查詢，如果在全域性作用域都沒有找到，就會報錯（ ReferenceError）

拓展問題：

由於所有的全域性變數都繫結在window物件上，當不同的js檔案引用了相同的全域性變數時，會產生衝突，衝突該如何解決？

解決方法：定義一個唯一全域性變數，然後把所有的變數都繫結到唯一全域性變數上，而不是繫結到window上

   //定義唯一全域性變數pengApp
    var pengApp = {};
    //定義全域性變數
    //屬性 以後呼叫name屬性用pengApp.name
    pengApp.name = "神明";
    //方法
    pengApp.add=function(a,b){
    return a+b;
    }

區域性作用域let

全域性作用域和區域性作用域的區別

全域性

function text(){
      for(var i=1 ;i<100;i++ ){
      console.log(i);
    };
    console.log(i+1);//發現i出了函式作用域還可以用
}
text()

區域性

function text(){
      for(let i=1 ;i<100;i++ ){
      console.log(i);
    };
    console.log(i+1);
}
text()

Es6關鍵字let，解決了區域性作用域衝突問題，建議使用let定義區域性作用域的變數

定義常量const

ES6之前定義常量的方式：全部用大寫字母定義的變數就是常量，建議不要修改

漏洞:不遵守規範常量可以被修改

var PI = 3.14;
    console.log(PI);
    var PI = 123;
    console.log(PI);
3.14
123

因此在ES6引入新特性const,一旦定義後不能修改，修改則會報錯

const PI = 3.14;
console.log(PI);
3.14