画图理解函数作用域，作用域链

对于学习前端的同学来说，作用域，作用域链，一点都不陌生，几乎第一天学习js就接触到。一直觉得自己对于这个天天挂嘴边的名词，处于很表面的了解。今天翻了下以前的学习笔记，结合自己的理解，来重新梳理下这个概念。

什么是作用域:作用域是一个对象，作用是存储。作用域中的变量都是对象的成员。

什么是作用域链：控制变量使用顺序,先局部，后全局。

上一个经典的代码，分别输出什么呢？相信一点都不难，为什么是这样的输出呢，函数内部到底发生了什么。来，上图。

var  a=10
function fun(){
var a = 100;
a++;
console.log(a);
}
fun()   //101
console.log(a) //10

复制代码

1.开始执行程序前：创建执行环境栈

执行环境栈，依次保存每个调用函数的执行环境。在执行环境栈中压入第一个全局
执行环境(全局EC),创建window对象，全局EC引用window对象  
复制代码

2.开始执行程序

所有全局变量都保存在全局作用域对象window中

3.定义函数时

• 在全局添加函数名变量
• 创建函数对象
• 函数名变量引用函数对象
• 函数对象中有一个scope属性，引用回创建函数时的作用域

4.调用函数时

• 在执行环境栈中压入函数的执行环境
• 创建函数活动对象AO(函数作用域对象，创建该函数所有的局部变量
• 新压入的函数执行环境 引用活动对象AO
• 函数作用域的parent指向创建该函数的作用域
• 此时，fn的函数作用里有局部变量a，输出101

5. 函数调用后

• 执行栈中的函数执行环境出栈
• 导致函数作用域对象AO释放
• 导致局部变量一同释放
• 此时，fn的局部变量a被释放，只剩全局的a = 10；输出10

转载于:https://juejin.im/post/5cea4c4ff265da1ba431ca48