JavaScript中Hoisting详解 (变量提升与函数声明提升)


Posted in Javascript onAugust 18, 2017

本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

如何将 函数声明 / 变量 “移动” 到作用域的顶部。

术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析。其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的。你在任何的 JavaScript 文档中找不到这个术语,我们说的 Hoisting(提升) 只是使用了其字面含义来做个比喻。

如果你已经对 JavaScript 作用域工作原理有基本的了解,那么更深入的了解 Hoisting(提升) 有助于你建立更强大的基础知识。(愚人码头注:作为 JavaScript 中的一个总要概念,变量提升和函数声明提升经常在前端开发面试时被问及,或者在前端开发笔试题中出现。可见了解 Hoisting(提升) 的重要性。)

为了更好地理解基础知识,让我们来回顾一下 “Hoisting(提升)” 到底意味着什么。另外,给你一个提醒,JavaScript 是一种解释性语言,这不同于编译性语言,这意味着JS代码是逐行执行的。

请考虑以下示例:

console.log(notyetdeclared);
// 打印 'undefined'
 
var notyetdeclared = 'now it is declared';
 
hoisting();
 
function hoisting(){
 console.log(notyetdeclared);
 // 打印 'undefined'
 
 var notyetdeclared = 'declared differently';
 
 console.log(notyetdeclared);
 // 打印 'declared differently'
}

在分析上面的示例代码之后,提出几个问题:

  • 第 6 行,该函数声明之前为何能访问?
  • 第 1 行,没有抛出错误,是因为这时变量 notyetdeclared 不存在吗?
  • 第 4 行,notyetdeclared 已经在全局作用域内声明了,为什么在第 9 行打印时还是  undefined 呢?

JavaScript 是非常合乎逻辑的,所有这些奇怪问题都有一个明确的解释。

我们从顶部开始解释,当代码在 JavaScript 中执行时,就会建立一个执行期上下文。 JavaScript 中有两种主要的执行期上下文类型 ? 全局执行期上下文和函数执行期上下文(愚人码头注:特别注意,执行期上下文和我们平常说的上下文不同,执行期上下文指的是作用域,而平常说的上下文是 this 的取值指向)。由于 JavaScript 是基于单线程执行模型,所以每次只能执行一段代码。

对于我们上面的代码,这个过程如图所示:

JavaScript中Hoisting详解 (变量提升与函数声明提升)

上述示例代码的调用栈:

  • 程序从栈(stack)上的全局执行期上下文开始执行。
  • 当调用 hoisting() 函数时,将一个新的函数执行期上下文推到栈(stack)上,并且全局执行期上下文被暂停。
  • 在 hoisting() 执行完成后 , hoisting()执行期上下文从栈(stack)中弹出,全局执行期上下文恢复。

这个过程是自解释的,但并没有真正解释我们在执行示例代码时所看到的异常。当执行期上下文跟踪代码的执行情况时,词法环境跟踪标识符到特定变量的映射。词法环境基本上是 JavaScript 作用域机制的内部实现。通常,词法环境与 JavaScript 代码的特定结构相关联,例如一个函数或一个 for 循环代码块。每当创建一个函数时,对其创建的词法环境的引用将在一个名为 [[Environment]] 的内部属性中传递。

所有这些术语涵盖的是一个简单而非常合乎逻辑的概念。允许将其分解。词法环境是一个有趣的名称,用于跟踪代码块中的变量和函数。除了跟踪局部变量、函数声明和参数之外,每个词法环境还跟踪其父级词法环境。所以上面的示例代码在 JavaScript 引擎中会被这样解析。上述代码的词法环境,如图所示:

JavaScript中Hoisting详解 (变量提升与函数声明提升)

注:

如果理解起来有问题,请查看以下三篇文章:

  • 深入理解JavaScript中的作用域和上下文
  • JavaScript 核心概念之作用域和闭包
  • 实例分析 JavaScript 作用域

为了在词法环境中解析标识符, JavaScript 引擎将检查当前环境的引用。如果没有找到引用,则通过使用 [[environment]] 移动到外部环境。这将一直持续进行下去,直到标识符被找到,或者抛出一个 ‘not defined'(未定义) 的错误。

基本上,JavaScript 代码的执行分为两个阶段。第一个阶段在当前词法环境中注册所有的变量和函数声明。完成之后,第二个阶段的 JavaScript 执行就开始了!

所以要详细说明第一阶段:它在两个步骤中起作用。

  • 扫描当前函数声明中的代码。函数表达式和箭头函数会被跳过。对于每个被发现的函数,都会创建一个新的函数,并使用函数名称将其绑定到环境中。如果标识符的名称已经存在,那么它的值就会被覆盖。
  • 然后扫描当前环境的变量。找到使用 var 定义的变量和放置在其他函数之外的变量,并注册一个标识符,其值初始化为 undefined 。如果存在标识符,则该值将保持不变。

注意:用 let 和 const 定义的是块变量,与 var 的处理稍微不同。在另一篇文章中了解更多的内容。

现在你应该已经对词法环境这个基本概念有了一定的了解,那么让我们回到示例代码中,并解释这些问题。

在设置全局上下文时,将对环境进行扫描,并将 hoisting() 函数附加到标识符上。然后在下一步中,变量 notyetdeclared 被注册,其值初始化为 undefined 。按照这个步骤继续理解代码。

现在我们来解释示例代码中提出的3个问题:

第 6 行,该函数声明之前为何能访问?

第1阶段, hoisting() 函数已经注册到了标识符中,当JS代码在第2阶段的全局执行期上下文中开始执行时,它会查找 hoisting 的词法环境,并在其定义之前找到该函数。

第 1 行,没有抛出错误,是因为这时变量 notyetdeclared 不存在吗?

同样的,notyetdeclared 被注册到了标识符,并在第1阶段中初始化为 undefined ,因此不会抛出任何错误。

最后,

第 4 行,notyetdeclared 已经在全局作用域内声明了,为什么在第 9 行打印时还是 undefined 呢?

现在我们进入函数 hoisting 环境中。在第1阶段中,notyetdeclared 被注册并初始化为  undefined,因为在这个词法环境中,notyetdeclared 的变量还没有被注册。如果第 12 行不包含var 关键字,那么情况就不同了。

希望现在可以清楚地看到,在 JavaScript 中 Hoisting(提升) 只是我们用于解释其背后原理的一个观点,从技术上来讲,函数和变量并不会移动到任何地方。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
详解jenkins自动化部署vue
May 14 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
JavaScript实现旋转轮播图
Aug 18 #Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 #Javascript
ECMAscript 变量作用域总结概括
Aug 18 #Javascript
微信小程序之前台循环数据绑定
Aug 18 #Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 #Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 #Javascript
详谈innerHTML innerText的使用和区别
Aug 18 #Javascript
You might like
php多维数组去掉重复值示例分享
2014/03/02 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
JS 判断代码全收集
2009/04/28 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
后勤园长自我鉴定
2013/10/17 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
温馨提示标语
2014/06/26 职场文书
护理培训心得体会
2016/01/22 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL