執行環境及做用域、變量對象、做用域鏈、閉包

一：執行環境及做用域 和 變量對象

  var color = "blue";
  function changeColor(){
    var anotherColor = "red";
    // 這裏能夠訪問color和anotherColor
  }
  // 這裏只能訪問color 
  changeColor();
複製代碼

執行環境是javascript中最爲重要的一個概念。每一個執行環境都有一個與之關聯的變量對象（保存執行環境中全部定義的變量和函數）。二：

1. 當代碼在執行環境中執行時，會建立一個做用域鏈。做用域鏈本質是一個指向變量對象的指針列表。

2. 若是執行環境是函數，則將其活動對象（最開始時只包含一個變量->argument對象）做爲變量對象。ps:argument對象在全局環境中是不存在的.

3. （基於2條件下）做用域鏈中的下一個變量對象來自外部環境，而再下一個變量對象則來自下下個外部環境。這樣，一直延續到全局執行環境;全局執行環境的變量對象始終都是做用域鏈中的最後一個對象。

三：js沒有塊級做用域**

  if (true) {
        var color = "blue";
    }
    alert(color);    //"blue"
複製代碼

注：在js中if語句中的變量申明會將變量添加到if外部的執行環境中（當前是指window變量）；此時window變量對象中有一個值是 color = 'blue'

for (var i=0; i < 10; i++){
            doSomething(i);
    }
    alert(i);      //10

 
複製代碼

注：在js中for循環結束後依然會存在循環外部的執行環境中，即window變量對象有 i = 10四：

  閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的常見方式，就是在一個函數內部建立另外一個函數。

eg: function createComparisonFunction(propertyName) {
        return function(object1, object2){
            var value1 = object1[propertyName];
            var value2 = object2[propertyName];
            if (value1 < value2){
                return -1;
            } else if (value1 > value2){
                return 1;
            } else {
                return 0;
            } //歡迎加入全棧開發交流圈一塊兒學習交流：864305860
        };//面向1-3年前端人員
    }//幫助突破技術瓶頸，提高思惟能力

複製代碼

//建立函數

var compareNames = createComparisonFunction("name");
複製代碼

//調用函數

var result = compareNames({ name: "Nicholas" }, { name: "Greg" });
複製代碼

注：createComparisonFunction()函數返回後，其執行環境的做用域鏈會被銷燬，但它的活動對象仍然會留在內存中，匿名函數的做用域鏈仍然在引用這個活動對象

以上是做用域鏈的這種配置機制引出了一個反作用，即閉包只能獲取外部函數任何變量的最後一個值

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i; 

        };
    }
    console.log(i) // i = 10
    for (var j = 0; j < 10; j++){
        console.log(result[j]()); //  打印10個10
    }
    return result;
}
createFunctions();
複製代碼

修改：

function createFunctions(){
        var result = new Array();
        for (var i = 0; i < 10; i++){
            result[i] = function(num){
                return num;
            }(i);
        }歡迎加入全棧開發交流羣一塊兒學習交流：864305860
        console.log(result);  // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]//面向1-3年前端人員
        return result;//幫助突破技術瓶頸，提高思惟能力
    }
    createFunctions();
複製代碼

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。