Javascript 的九种作用域，你能说出几种？（1）

上一篇 / 下一篇  2022-12-12 10:35:44

查看( 14 ) / 评论( 0 ) / 评分( 0 / 0 )
　　测试行业那些事儿，还有什么是你不知道？填问卷，了解详情。链接：http://vote.51testing.com/  (免费领测试技术资料，数量有限，先填先得~）

　　作用域想必大家都知道，就是变量生效的范围，比如函数就会生成一个作用域，声明的变量只在函数内生效。
　　而这样的作用域一共有 9 种，其中几种绝大多数前端都说不出来。
　　下面我们就一起过一遍这 9 种作用域吧，看看你知道几种：
　　（为了保证准确性，所有的作用域类型都是通过调试所得）
　　1.Global 作用域
　　通过 var 声明一个变量，打个断点，可以看到 Scope 里有 Global 类型的作用域，也就是全局作用域，里面保存了变量 a：
　　在浏览器环境下，可以通过 a 访问全局变量，也可以通过 window.a 访问。
　　2.Local 作用域
　　声明个函数，在函数内声明一个变量，调用这个函数的时候，可以看到 Scope 里有 Local 类型的作用域，也就是本地作用域，里面保存了变量 b：
　　这两种作用域都很常见，没啥好说的。
　　3.Block 作用域
　　es6 加入了块语句，它也同样会生成作用域：
　　如图，会把里面声明的变量 a 放到 Block 作用域内，也就是块级作用域。
　　if、while、for 等语句都会生成 Block 作用域：
　　前几种作用域很常规，但下面这种作用域绝大部分前端就不知道了：
　　4.Script 作用域
　　这段代码大家觉得会生成什么作用域：
　　很多同学都会说，不是全局作用域么？
　　那这个现象你能解释么：
　　a、b、c 如果都是全局变量，那在浏览器里就可以通过 window.xx 来访问，但结果 window.a 和 window.b 都是 undefined，而直接访问 a、b 能拿到值。
　　看下现在的作用域就知道了：
　　你会发现 let、const 声明的全局变量被放到了 script 作用域，而 var 声明的变量被放到了 global 作用域。
　　这就是浏览器环境下用 let const 声明全局变量时的特殊作用域，script 作用域。可以直接访问这个全局变量，但是却不能通过 window.xx 访问。
　　所以你再看到这样的代码，就不奇怪了：
　　window.xxx = xxx；
　　这个 xxx 肯定是通过 let、const 声明的全局变量，需要手动挂到 window 上。
　　那上面这个 script 作用域在 node 环境里有么？
　　我们用 node 调试下。
　　5.模块作用域
　　同样的代码，在 node 环境下就没有了 Script 作用域，但是多了一个 Local 作用域：
　　这个 Local 作用域还有 module、exports、require 等变量，这个叫做模块作用域。
　　这个作用域有些特殊，其实它也是函数作用域。为什么呢？后面会有解释。
　　说到特殊的作用域，其实还有一些：
　　6.Catch Block 作用域
　　Catch 语句也会生成一个特殊的作用域，Catch Block 作用域，特点是能访问错误对象：
　　在 node 里也是一样，只不过还有一层模块作用域：
　　有同学会问，那 finally 语句呢？
　　这个就没啥特殊的了，就是 Block 作用域：
　　类似的还有 With Block.

收藏 举报

TAG: 软件开发 Javascript JavaScript

 

评分：0

我来说两句

Open Toolbar