千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

【热点话题】 零基础学IT IT学习教程 IT学习笔记 IT技术干货 IT培训机构 IT应聘面试 IT职场就业
当前位置:首页  >  关于学院  >  技术干货  > 你不知道的JavaScript作用域

你不知道的JavaScript作用域

来源:千锋教育
发布人:syq
时间: 2022-07-28 16:02:00 1658995320

  如果你是一个前端工程师,那么JavaScript作用域你一定不会陌生。你知道的可能是 JavaScript中有: 传统的函数级作用域和全局作用域、ES6 let const 的块级作用域。但是还有一个你不知道的块级作用域的存在,今天我们就来扒一扒这些鲜为人知的小秘密我们先来看看下面这个段代码,请思考一下结果是什么。

JavaScript作用域

  想必你心中已经有了结果

1

  正确答案是3 2

  你答对了吗?答案结果是否有些意外呢?好了,我们来看看为什么会出现这个答案首先我们需要先了解以下基本知识

  声明提前

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

  全局变量声明

2

  函数作用域变量声明

3

  函数声明

4

  函数表达式声明

5

  函数块级作用域

  通过下面代码我们可以知道 变量的声明是没有块级作用域的,if语句块中声明的变量foo会提升到全局作用域并初始化值为undefined

6

  我们再看看函数的情况

7

  上面这个例子告诉我们 函数foo提升到了if语句块的顶部,但是没有提升到全局作用域的顶部。但全局作用域中存有一个名为foo的变量 在代码执行后同步成了函数foo

  同步?为什么会有同步?我们来看看观察上帝视角的神器 ———— 断点调试

  我这边监听了 foo 变量和 window.foo 大家请注意一下它的变化

  同时我们也关注一下 Scope 作用域

  我们看到Scope中只有全局作用域 foo和window.foo的只都是undefined

8

  代码执行到if语句块中 我们再Scope中又发现了一个新的块级作用域 当前块级作用域foo的值被赋值为一个函数(函数提升) 而全局作用域中的foo依旧是undefined

9

  代码继续往后执行 执行函数的赋值 block作用域依然存在 我把几个变量的值使用箭头进行了对应

10

  神奇的地方来了 在函数执行赋值后 块级作用域消失 而全局变量的foo同步成了刚才块级作用域的foo

11

  回归原题

  我们对foo变量进行隔行输出 看看结果

12

  结合上面断点测试的结果大家可以发现,函数在代码块中声明会提前到块级作用域顶部,预编译结束后开始执行代码 在执行阶段任然会执行函数的赋值操作,其实是函数赋值的第二次执行(第一次在预编译阶段) 第二次的赋值执行的意义是确认当前 函数/全局 作用域能准确的检索到函数 所以讲函数同步到了 当前的函数或全局作用域中。更多关于前端培训的问题,欢迎咨询千锋教育在线名师,如果想要了解我们的师资、课程、项目实操的话可以点击咨询课程顾问,获取试听资格来试听我们的课程,在线零距离接触千锋教育大咖名师,让你轻松从入门到精通。

  注:本文部分文字和图片来源于网络,如有侵权,请联系删除。版权归原作者所有!

 

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

10年以上业内强师集结,手把手带你蜕变精英

请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通

免费领取

今日已有369人领取成功

刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取

推荐阅读

最新文章

开班信息
北京校区
  • 北京校区
  • 大连校区
  • 广州校区
  • 成都校区
  • 杭州校区
  • 长沙校区
  • 合肥校区
  • 南京校区
  • 上海校区
  • 深圳校区
  • 武汉校区
  • 郑州校区
  • 西安校区
  • 青岛校区
  • 重庆校区
  • 太原校区
  • 沈阳校区