变量对象/作用域/作用域链------＞闭包

一.变量对象:

变量对象，是执行上下文中的一部分，可以抽象为一种 数据作用域，其实也可以理解为就是一个简单的对象，它存储着该执行上下文中的所有 变量和函数声明(不包含函数表达式)。

二.作用域:

作用域其实可理解为该上下文中声明的 变量和声明的作用范围。可分为 块级作用域 和 函数作用域

特性:

• 声明提前:一个声明在函数体内都是可见的, 函数优先于变量
• 非匿名函数自动执行,函数变量为只读,无法修改

let foo = function() { console.log(1) };
(function foo() {
    foo = 10  // 由于foo在函数中只为可读，因此赋值无效
    console.log(foo)
}()) 

// 结果打印：  ƒ foo() { foo = 10 ; console.log(foo) }

三.作用域链:

作用域分为全局作用域和局部作用域，当声明了一个函数，函数内部就会形成一个局部作用域。  一个局部作用域都有上级作用域，上级作用域看的是函数声明。当函数调用时，会产生一个局部执行上下文（局部栈），多个局部栈上下文之间是没有关系的。在一个局部执行上下文中要完成形参的赋值、声明的提升、代码的执行。当执行代码时，如果访问一个变量x，先看这个变量是否是它自己上下文中的，如果是，变量x就是本上下文中的，如果不是则向上一级作用域中查找，不知查找一级，一直找到全局作用域，此时形成一个链，这个链叫作用域链（作用域链的查找机制）。

四.闭包:

由变量根据作用域的不同分为全局变量和局部变量

• 函数内部可以使用全局变量
• 函数外部不可以使用局部变量
• 当函数执行完毕,当前作用域内的局部变量销毁

闭包: 值有权限访问另一个函数作用域中的变量的函数.可以理解为,一个作用域可以访问另外一个函数内部的局部变量.

闭包作用:延伸变量的作用范围

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();

闭包应用案列1:

/*需求分析
打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
如果有拥堵情况,总价格多收取10块钱拥堵费*/

 var car = (function() {
     var start = 13; // 起步价  局部变量
     var total = 0; // 总价  局部变量
     return {
       // 正常的总价
       price: function(n) {
         if (n <= 3) {
           total = start;
         } else {
           total = start + (n - 3) * 5
         }
         return total;
       },
       // 拥堵之后的费用
       yd: function(flag) {
         return flag ? total + 10 : total;
       }
	}
 })();
console.log(car.price(5)); // 23
console.log(car.yd(true)); // 33

案例2:

案例3(分析): 

for (var i = 0; i < 5; ++i) {
  setTimeout(function() {
    console.log(i + " ");
  }, 100);
}

输出结果为?

输出结果为 5 5 5 5 5
为什么不是1,2,3,4,5 ?
如何修改代码使其输出结果为1,2,3,4,5 ?

解析: 

• js 运行环境为单线程，setTimeout 注册的函数需要等到主线程空闲时才能执行，此时 for 循环已经结束，i 值为 5，又因为循环中 setTimeout 接受的参数函数通过闭包访问变量 i，所以 5 个定时输出都是 5。

修改方法: 将 setTimeout 放在立即执行函数中，将 i 值作为参数传递给包裹函数，创建新闭包。

for (var i = 0; i < 5; ++i) {
  (function(i) {
    setTimeout(function() {
      console.log(i + " ");
    }, 100);
  })(i);
}

案例四(说出结果):

function add() {
  var x = 1;
  console.log(++x);
}

add(); 

add(); 

结果:

输出结果都为2

function add() {
  var x = 1;
  return function() {
    console.log(++x);
  };
}
var num = add();

num();

num();

num();

输出结果为2,3,4