Javascript 的九种作用域,你能说出几种?(1)

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

  测试行业那些事儿,还有什么是你不知道?填问卷,了解详情。链接: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