一文搞懂js的作用域与作用域链

前言

一段程序代码中所用到的名字并不总是有效和可用的，限定这个名字的可用性代码范围就是这个名字的==作用域。

比如我在一个文件中定义一个变量a，在另一个文件中a无法使用。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字的冲突。

我们在学习前端的很多技术时，逃不开作用域的运用。比如在js中的函数，函数的作用域我们需要了解；比如在npm包的应用中，我们只能读取module.exports中向外暴露的内容；以及在vue中，我们注册组件时，有的是组件的作用域是全局性的，有的组件只能应用于某一块中。

由此可见，了解js的底层作用域相关的知识非常重要。本节博客就围绕着js的作用域相关知识进行讲解，希望能对读着朋友有帮助。

一，js的作用域

1.1 作用域

概念：作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。

1.2 全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域。如整个script标签或者是一个单独的js文件：

1.3 局部作用域

在函数内部的就是局部作用域，又叫做函数作用域，这个代码的名字只在函数内部起效果和作用：

请看如下代码及运行结果：


通过以上可知，两者作用域不一样，其实是互不影响的。

但是一旦在同一个作用域中有两个相同的变量，就会出问题，后出现的num会覆盖前面出现的num：

二，变量的作用域

根据作用域的不同，变量分为两种，分别是全局变量和局部变量。

2.1 全局变量

其中，全局变量使在全局作用下的变量。
如这个num：

2.2 局部变量

接着是局部变量，局部变量是在局部作用域下的变量，如num1：

如果我们在外面引用，由于是局部作用域所以会报错，只能在函数内部调用：


注意，如果在函数内部没有声明但是被赋值的变量也是全局变量，这个需要特别记忆：


还要注意的一个点是，函数的形参也是局部变量。

2.3 执行效率

全局变量存放在内存中，只有浏览器关闭时才会销毁，比较占内存资源；
而局部变量，当程序执行完毕后就会被销毁，比较节约内部资源。所以我们更喜欢使用局部变量。

三，作用域链

作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪个值，这种结构我们称为作用域链：

采用就近原则，内部函数访问外部函数，从内向外访问，没有的话就继续往上找即可：

后记

本节内容讲解了作用域，变量作用域以及作用域链的相关知识，后续会更新更多的js基础知识，谢谢关注！