JavaScript之作用域链 1

1.前言

在文章的最开始，先简要的介绍一下关于作用域的几个概念，作用域相关的知识可以参考词法作用域与动态作用域

[[scope]]: 每个函数在创建时，都会有一个隐藏属性[[scope]]，它指向创建该函数时的AO。
VO变量对象：也可称作AO，存储函数中所需要的变量、参数、函数等数据，VO中包含一个额外的属性，该属性指向创建该VO的函数本身。
作用域链：：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式链接，这种链式链接叫做作用域链。
查找变量：在那个函数里面查找变量，就从那个函数的作用域链顶端依次向下查找。

2.JavaScript中的作用域

JavaScript有两种作用域：

全局作用域
局部作用域

除了函数内部和{}内部定义的变量，其余都属于全局作用域。ES6提供了块级作用域，目前局部作用域包含函数作用域和块级作用域。

2.1 全局作用域

全局作用域中定义的变量可以被任何地方访问。一般有如下几种属于全局作用域：

最外层定义的函数和最外层函数之外定义的变量拥有全局作用域。
imply global：未经声明直接赋值的变量。

function func() {implyGlobalVar = 'global';var localVar = 'local'
}
func() // 执行
console.log(implyGlobalVar) // global
console.log(localVar)       // localVar is not defined

var a = b = 10; b也属于imply global

window上的属性都具有全局作用域: 在JavaScript中，window == Global

全局作用域存在一定的弊端：如果张三和李四同时都在自己的全局定义同一个全局变量，则会发生变量的覆盖。

2.2 局部作用域

与全局作用域相反，局部作用域内的变量只能被定义它的局部作用域访问。

函数作用域

函数作用域里的变量和函数只能由函数内部访问

function foo() {var localVar = 'local'function localFunc() {console.log(local)}localFunc() // local
}
localFunc() // 报错

作用域是分层的，内部函数可以访问外部函数作用域里的变量，反之不可以(作用域链)。

function foo() {var localInnerVar = 'localInner'function localFunc() {console.log(local)}localFunc() // localInner
}

注意：快语句({}内的语句)，比如if，while等，不会创建新的作用域。

if (1) {var a = 10
}
console.log(a) // 10

块级作用域

ES6新增了let和const两种声明变量的命令，所声明的变量只能在指定块的作用域内被访问。
- 不会发生变量提升
```
console.log(b) // undefined
console.log(a) // Uncaught ReferenceError: a is not defined
let a = 'i am there'
var b = 'i am here'
```
- 不允许重复声明
```
console.log(a) // Identifier 'a' has already been declared
var a = 'the first'
let a = 'the second'
```
- 常见闭包问题解决
在学习闭包问题的时候，很容易写出类似下面的代码
```
var arr = [];
for (var i = 0; i < 10; i++) {arr[i] = function() {console.log(i);}
}
arr[0]() // 10
```
最终返回的结果是10，把所有的arr执行一遍，发现最后的结果都是10。

当时我们采用立即执行函数的方式来解决上面的闭包问题：
```
var arr = [];
for (var i = 0; i < 10; i++) {(function (i) {arr[i] = function() {console.log(i);}}(i))
}
arr[0]() // 0
```
立即执行函数解决上述闭包问题，其实就是借助了作用域链方面的知识，相当于给arr[i]函数的外层添加了一层作用域。但当我们学习let之后，解决上面问题就简单多了。
```
var arr = [];
for (let i = 0; i < 10; i++) {arr[i] = function() {console.log(i);}
}
arr[0]() // 0
```

3.作用域链

JavaScript函数执行时，首先会在自身的AO中查找对应属性值，若查找不到，则会去父级的AO上找，在查找不到则再去父级的父级查找，直到找到根window对象，这样形成的“AO链”就是作用域链。

下面以一个例子来模拟整个作用域链的流程：

function foo() {function bar() {var inner = 234;outer = 0;console.log(inner);}var outer = 123;bar();console.log(outer)console.log(glob)
}
var glob = 100;
foo()

foo函数创建
foo函数执行
bar函数执行

bar函数执行: outer = 0，在bar的AO中没有outer属性，沿红色作用域链向上查找，foo的AO中存在outer属性，因此将foo的AO中的outer值修改为0；inner属性可以在自身AO中找到，因此直接打印234。
bar函数执行完毕，bar的AO进行销毁，继续执行foo中未执行完的代码

outer可以在自身AO中找到，直接打印0；glob不在自身AO中，沿作用域链可在GO中查找到，打印100。foo执行完毕，AO销毁。

JavaScript之作用域链 1相关推荐

JavaScript之作用域链
本文共 1200 字,读完只需 4 分钟概述 JavaScript 中的可执行代码有其执行上下文,在执行上下文中,有三个重要的元素: 变量对象(variable object) 作用域链(scope ...
JavaScript（作用域链）
作用域可以相互嵌套的,作用域嵌套形成的链式结果 - 作用域链作用域链规则 1.我们在任何一个地方使用(当做值去赋值.运算.输出的时候)一个变量的时候,会先在当前使用的作用域中找变量的定义,如果找到了 ...
JavaScript从作用域到闭包
目录作用域全局作用域和局部作用域块作用域与函数作用域作用域中的声明提前作用域链函数声明与赋值声明式函数.赋值式函数与匿名函数代码块自执行函数闭包作用域(scope) 全局作用域 ...
如何理解JS中作用域和作用域链
1.背景介绍任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两 ...
JavaScript执行环境及作用域（一）——执行环境栈和作用域链机制
2019独角兽企业重金招聘Python工程师标准>>> 执行环境是JavaScript中最为重要的一个概念,每个执行环境都有一个与之关联的变量对象,执行环境中所有的变量和函数都保存在 ...
JavaScript 开发进阶：理解 JavaScript 作用域和作用域链（上）
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...
JavaScript作用域链
之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...
擒贼先擒王，简单谈一下JavaScript作用域链（Scope Chain）
前言我们都知道一个执行上下文的数据(变量.函数声明和函数的形参)作为属性存储在变量对象中,同时我们也应该知道变量对象在每次进入上下文时创建并填入初始值,值的更新出现在代码执行阶段.那么咱们专门讨论与 ...
对javascript作用域链的理解
这几天学习了一下javascript作用域链,感到这个挺重要的,所以写一篇文章分享一下: 1. 作用域链: 当代码在一个环境中执行时,会创建由变量对象构成的一个作用域链.作用域链的用途是:保证对执行环 ...