web前端教程之JavaScript的作用域

本文主要探讨JavaScript的作用域,包括声明提前、函数级作用域、全局作用域和ES6的块级作用域。通过示例代码解析了变量声明提升、函数提升以及块级作用域中的函数声明,强调了断点调试在理解作用域中的重要性,帮助前端开发者更好地理解和应用JavaScript作用域。
摘要由CSDN通过智能技术生成

作为一个前端工程师,你必须对JavaScript的作用域不陌生,传统常见的有函数级作用域,还有全局作用域,ES6 let const 的块级作用域,其实还有一个你不知道的块级作用域,今天小千就来给大家介绍一下。

我们先来看看下面这个段代码,请思考一下结果是什么。
在这里插入图片描述
想必你心中已经有了结果,答案是 3 2

你答对了吗?答案结果是否有些意外呢?

好了,我们来看看为什么会出现这个答案?首先我们需要先了解以下基本知识。

声明提前

声明提前指的是JS引擎在执行之前对代码进行的预解析(为了提高执行效率) 具体的来说就是使用(var)声明变量和(function)声明的函数正预编译阶段将其提升到了作用域的顶部

全局变量声明
在这里插入图片描述
函数作用域变量声明
在这里插入图片描述
函数声明
在这里插入图片描述
函数表达式声明
在这里插入图片描述

函数块级作用域

通过下面代码我们可以知道 变量的声明是没有块级作用域的,if语句块中声明的变量foo会提升到全局作用域并初始化值为undefined
在这里插入图片描述
我们再看看函数的情况
在这里插入图片描述
上面这个例子告诉我们 函数foo提升到了if语句块的顶部,但是没有提升到全局作用域的顶部。但全局作用域中存有一个名为foo的变量 在代码执行后同步成了函数foo

同步?为什么会有同步?我们来看看观察上帝视角的神器 ———— 断点调试。我这边监听了 foo 变量和 window.foo 大家请注意一下它的变化。同时我们也关注一下 Scope 作用域

我们看到Scope中只有全局作用域 foo和window.foo的只都是undefined
在这里插入图片描述
代码执行到if语句块中 我们再Scope中又发现了一个新的块级作用域 当前块级作用域foo的值被赋值为一个函数(函数提升) 而全局作用域中的foo依旧是undefined
在这里插入图片描述
代码继续往后执行 执行函数的赋值 block作用域依然存在 我把几个变量的值使用箭头进行了对应
在这里插入图片描述
神奇的地方来了 在函数执行赋值后 块级作用域消失 而全局变量的foo同步成了刚才块级作用域的foo
在这里插入图片描述

回归原题

我们对foo变量进行隔行输出 看看结果
在这里插入图片描述
结合上面断点测试的结果大家可以发现,函数在代码块中声明会提前到块级作用域顶部,预编译结束后开始执行代码 在执行阶段任然会执行函数的赋值操作,其实是函数赋值的第二次执行(第一次在预编译阶段) 第二次的赋值执行的意义是确认当前 函数/全局 作用域能准确的检索到函数 所以讲函数同步到了 当前的函数或全局作用域中。

好了本次解析就到这里,还有不明白的小伙伴可以copy代码去进行断点测试,相信很快你能理解其中奥秘。

本文来自千锋教育,转载请注明出处。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值