执行环境及做用域、变量对象、做用域链、闭包

一：执行环境及做用域 和 变量对象

  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，快速升职加薪，走上人生巅峰。