图解 | JavaScript的作用域和作用域链

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

前情提要：

题目 | let和var的区别（一、二）

图解 | let和var的区别（一、二）

题目 | 带VAR和不带VAR的区别

图解 | 带VAR和不带VAR的区别

总结 | LET和VAR区别（三、四）

0 /

GO/VO/AO

ECStack：Execution Context Stack 执行环境栈
EC：Execution Context 执行环境（执行上下文）
- VO：Variable Object 变量对象
- AO：Activation Object 活动对象
Scope：作用域
Scope Chain：作用域链
GO：global object 全局对象

1 /

图解来啦~

var ary = [1, 2];
function fn(ary) {console.log(ary);ary[0] = 10;ary = [10];ary[0] = 0;console.log(ary);
}
fn(ary);
console.log(ary);

咱前面说的（↑前情提要蓝色字可穿越）浏览器在执行代码前会先进行变量提升，那下面这张图呢，再来加点料。

【图一】画了这些东西：

浏览器在执行代码时，会开辟出一个专门执行代码的栈内存空间：执行栈（ECStack）
会有一个全局的执行上下文（EC(G)在浏览器中会指向window）,把执行上下文压入执行栈里面进行代码执行：进栈。如果执行完以后没有用了呢，会出栈；有的还有用的，暂时不执行它了，会被压入栈底，换别的来执行（以后再告诉你她叫啥~）
在EC(G)里面有一个全局对象GO，在浏览器里面会把它赋值给window
有一块地名叫VO的是用来存储全局上下文的变量
基本数据类型直接存放在栈内存中；引用数据类型则都存在堆内存中，把堆地址赋值给变量名

【图二】看看多了啥呀~

函数创建时，初始化了当前函数的作用域，也就是它的户口所在地：FN[scope]:VO(G)。即：[[scope]] =所在上下文EC中的变量对象VO/AO
- 浏览器的执行栈：ECStack
- 代码执行的上下文：EC(G) 全局执行上下文，EC(FN)函数执行上下文
  - VO 变量对象——只有全局执行上下文里面才有：存放着全局上下文的变量
  - AO 活动对象——函数执行上下文里面才有，是VO的一个分支：存放着函数执行上下文的变量
- 作用域：函数创建的地方，它的户口所在地
每一次一个函数执行都会创建一个全新的函数执行上下文，AO里面存放着当前这个上下文的一些东西
- 初始化THIS指向
- 初始化作用域链：scopeChain:<自己执行的创建的变量对象, 户口所在地>
- arguments 实参集合
- 形参赋值、变量提升…
还有很重要的一步：请看下图【图三】

（OS：这里不是俄罗斯套娃呀~~~）执行栈、执行上下文、作用域、作用域链 动手画起来~呀！

【图三】我不是故意要画这么长的~

当函数执行时，会创建一个全新的执行上下文，它肯定是必须要放在执行栈里面的。

此时，EC(G)全局执行上下文暂时不执行了，会把它往栈底压，把需要执行的EC(FN)函数执行上下文放到栈里面执行。

函数执行：

创建一个全新的执行上下文，放到执行栈中
初始化THIS
初始化作用域链scopeChian:<AO, xxx>
AO变量对象存储内容：arguments、形参赋值、变量提升…
代码执行

当EC(FN)中的代码执行完了，它没有被外界占用的东西了，它就可以出栈了。那么，浏览器会择一个良辰吉时（浏览器的垃圾回收机制）把它释放并销毁。EC(G)就会重新调回来继续执行了。

请看【图四】【图五】

2 /

多画图、自己画

那么，就把之前的题目自己重新画一遍吧~

题目 | let和var的区别（一、二）
图解 | let和var的区别（一、二）
题目 | 带VAR和不带VAR的区别
图解 | 带VAR和不带VAR的区别
总结 | LET和VAR区别（三、四）

3 /

背、背、背

把Array.prototype上的方法名字背成绕口令的速度脱口而出

toLocaleString、toString
push、pop、shift、unshift
concat、slice、splice
reverse、sort
every、filter、forEach、map、some
indexOf、lastIndexOf
reduce、reduceRight
join
copyWithin、entries、fill、find、findIndex、flat、flatMap、includes、keys、values

绕口令呀

八百标兵奔北坡，

炮兵并排北边跑。

炮兵怕把标兵碰，

标兵怕碰炮兵炮。

来，捋顺一下舌头

八了百了标了兵了奔了北了坡，

炮了兵了并了排了北了边了跑。

炮了兵了怕了把了标了兵了碰，

标了兵了怕了碰了炮了兵了炮。

方法的用法请参考：

《JavaScript高级程序设计（第3版）》5.2节

地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

先背过方法名、再熟知方法的用途。先简易的来，然后再一层层往上加，慢就是快

整理方法可以从4个维度：1. 功能 2. 参数 3. 返回值 4. 原数组：是否变化

图解 | JavaScript的作用域和作用域链相关推荐

图解Javascript——作用域、作用域链、闭包
什么是作用域? 作用域是一种规则,在代码编译阶段就确定了,规定了变量与函数的可被访问的范围.全局变量拥有全局作用域,局部变量则拥有局部作用域. js是一种没有块级作用域的语言(包括if.for等语句的 ...
JavaScript执行环境及作用域（一）——执行环境栈和作用域链机制
2019独角兽企业重金招聘Python工程师标准>>> 执行环境是JavaScript中最为重要的一个概念,每个执行环境都有一个与之关联的变量对象,执行环境中所有的变量和函数都保存在 ...
JavaScript 开发进阶：理解 JavaScript 作用域和作用域链（上）
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...
Javascript的作用域，作用域链，闭包
1,作用域和作用域链概念作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 1.1 全局作用域,在代码 ...
Javascript中闭包的作用域链
作用域定义了在当前上下文中能够被访问到的成员,在Javascript中分为全局作用域和函数作用域,通过函数嵌套可以实现嵌套作用域. 闭包一般发生在嵌套作用域中.闭包是JavaScript最强大的特性之 ...
JavaScript重难点解析4（作用域与作用域链、闭包详解）
JavaScript重难点解析4(作用域与作用域链.闭包详解) 作用域与作用域链作用域作用域与执行上下文作用域链闭包闭包理解将函数作为另一个函数的返回值将函数作为实参传递给另一个函数调用 ...
javascript精雕细琢（三）：作用域与作用域链
目录引言 1.执行环境 2.作用域与作用域链引言作用域与作用域链是JS应用中无时无刻不在影响程序运行的关键属性,但是由于它的不可见性,或者说它存在的过于普遍,简直就像空气一样.所以对它的谈及,都 ...
Javascript 运行上下文和作用域链
一.作用域Scope和上下文Context 在javascript中,作用域scope和上下文context是两个不同的概念.每个函数调用都会伴随着scope和context,从本质上来说,scope ...
JavaScript 开发进阶：理解 JavaScript 作用域和作用域链
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...