前端基础进阶（四）：详细图解作用域链与闭包

https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/
说明：此处只是记录阅读前端基础进阶的理解和总结，如有需要请阅读上面的链接

一、作用域链

作用域链是由当前环境和当前环境以上的一系列变量对象组成的，它保证了有权限的变量对象的有序访问。这句话怎么理解，看下下面的例子

var a = 20;

function test() {
var b = a + 10;

function innerTest() {
var c = 10;
return b + c;
}

return innerTest();
}

test();

VO(global)，VO(test), VO(innerTest)分别表示全局上下文，函数test的执行上下文，函数(innerTest)的执行上下文的变量对象，那么函数test的作用域链包括VO(test)、VO(global)，而函数innerTest的作用域链则包括以上三个变量对象。

可以用一个数组来表示作用域链，当前环境的变量对象放在作用域链的前端，末端是全局上下文的变量对象。可以把作用域链理解为以最前端为起点，最末端为终点的单方向通道

innerTestEC = {
VO: {...},  // 变量对象
scopeChain: [VO(innerTest), VO(test), VO(global)], // 作用域链
}

二、闭包

如果子函数B中访问了父函数A中的变量，则形成闭包。大部分书籍以函数B指代闭包，如闭包B，而谷歌浏览器以函数A指代闭包。

闭包的存在使得原本应该在函数结束时释放的变量空间保存了下来，供子函数调用的时候使用。

// demo01
function foo() {
var a = 20;
var b = 30;

function bar() {
return a + b;
}

return bar;
}

var bar = foo();
bar();

如上函数bar访问了父函数foo中的变量a,b形成闭包，并且当foo函数执行完时，变量对象a,b并没有被释放，而是保存了下来供函数bar使用，正常情况下如果没有闭包变量对象a,b是应该释放的。

闭包只产生在只有父子关系的函数中吗，其实不是的，只要函数B访问了其以上的任何一个函数的变量对象，闭包都会产生，看如下例子

function foo() {
var a = 20;
var b = 30;

function bar() {
return function dd() {
return a + b;
}
}

return bar;
}

var bar = foo();
var dd = bar();
console.log(dd());

三、练习题

利用闭包，修改下面的代码，让循环输出的结果依次为1， 2， 3， 4， 5

for (var i=1; i<=5; i++) {
setTimeout( function timer() {
console.log(i);
}, i*1000 );
}

这个题目需要了解setTimeout的详细用法和闭包的概念，详细答案https://mp.weixin.qq.com/s/XB6OS2b162fV8YQ-TzE_nQ

for (var i=1; i<=5; i++) {
setTimeout( (function(i) {
return function() {
console.log(i);
}
})(i), i*1000 );
}

这里记一下为什么会用到自执行函数，用到自执行函数主要是为了保存i的值，利用传参把每次i的值保存在每一个自执行函数的参数中，然后利用闭包访问每次保存的值。需要注意的是setTimeout里面的函数中的i和for循环的i其实是两个不同对象，它是函数的参数保存着i的值，因此也可以像下面这样写

for (var i = 1; i <= 5; i++) {
setTimeout((function (a) {

return function () {
console.log(a);
}
})(i), i * 1000);
}