作为一个前端工程师，你必须对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代码去进行断点测试，相信很快你能理解其中奥秘。
学习web前端，可以参考千锋web前端培训班提供的web前端学习路线，该学习路线对从零基础小白到web前端初级开发工程师，web前端高级开发工程师，后面的web前端大神级开发工程师都有一个明确清晰的指导，根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解，并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群：857920838 加群找群管理领取即可，等你来哦~~
京公网安备 11010802030320号