本文主要给大家介绍了关于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' }
在分析上面的示例代码之后,提出几个问题:
JavaScript 是非常合乎逻辑的,所有这些奇怪问题都有一个明确的解释。
我们从顶部开始解释,当代码在 JavaScript 中执行时,就会建立一个执行期上下文。 JavaScript 中有两种主要的执行期上下文类型 – 全局执行期上下文和函数执行期上下文(愚人码头注:特别注意,执行期上下文和我们平常说的上下文不同,执行期上下文指的是作用域,而平常说的上下文是 this 的取值指向)。由于 JavaScript 是基于单线程执行模型,所以每次只能执行一段代码。
对于我们上面的代码,这个过程如图所示:
上述示例代码的调用栈:
这个过程是自解释的,但并没有真正解释我们在执行示例代码时所看到的异常。当执行期上下文跟踪代码的执行情况时,词法环境跟踪标识符到特定变量的映射。词法环境基本上是 JavaScript 作用域机制的内部实现。通常,词法环境与 JavaScript 代码的特定结构相关联,例如一个函数或一个 for 循环代码块。每当创建一个函数时,对其创建的词法环境的引用将在一个名为 [[Environment]] 的内部属性中传递。
所有这些术语涵盖的是一个简单而非常合乎逻辑的概念。允许将其分解。词法环境是一个有趣的名称,用于跟踪代码块中的变量和函数。除了跟踪局部变量、函数声明和参数之外,每个词法环境还跟踪其父级词法环境。所以上面的示例代码在 JavaScript 引擎中会被这样解析。上述代码的词法环境,如图所示:
注:
如果理解起来有问题,请查看以下三篇文章:
为了在词法环境中解析标识符, JavaScript 引擎将检查当前环境的引用。如果没有找到引用,则通过使用 [[environment]] 移动到外部环境。这将一直持续进行下去,直到标识符被找到,或者抛出一个 ‘not defined'(未定义) 的错误。
基本上,JavaScript 代码的执行分为两个阶段。第一个阶段在当前词法环境中注册所有的变量和函数声明。完成之后,第二个阶段的 JavaScript 执行就开始了!
所以要详细说明第一阶段:它在两个步骤中起作用。
注意:用 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中的变量提升和函数提升,包括了详解javascript中的变量提升和函数提升的使用技巧和注意事项,需要的朋友参考一下 1在js中只有两种作用域 a:全局作用域 b:函数作用域 在ES6之前,js是没有块级作用域。 首先来解释一下什么是没有块级作用域? 所以此时 是可以打印输出变量a的值。 2:什么是变量提升? 在我们的js中,代码的执行时分两步走的,1、解析
本文向大家介绍举例子说明javascript的变量声明提升和函数声明提升相关面试题,主要包含被问及举例子说明javascript的变量声明提升和函数声明提升时的应答技巧和注意事项,需要的朋友参考一下 先声明函数名,再声明 var 变量名,然后按顺序从上到下赋值。
本文向大家介绍基于js的变量提升和函数提升(详解),包括了基于js的变量提升和函数提升(详解)的使用技巧和注意事项,需要的朋友参考一下 一、变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。 上个简历的例子如: 之所以会是以上的打印结果,是由于js的变量提升,实际上上面的
本文向大家介绍JavaScript中变量提升与函数提升经典实例分析,包括了JavaScript中变量提升与函数提升经典实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript中变量提升与函数提升。分享给大家供大家参考,具体如下: 从两个实例说起: eg1: eg2: 1、提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面。 注意: 只有声明本身会被提升,而赋值
本文向大家介绍JavaScript中提前声明变量或函数例子,包括了JavaScript中提前声明变量或函数例子的使用技巧和注意事项,需要的朋友参考一下 如题所示,看下面的示例。 (可以使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发者工具,进入控制台console输入) (使用技巧: 控制台输入时Shift+Enter可以中途代码换行) 执行时的截图如下所示: 解释如下: 在Jav
本文向大家介绍JS中作用域和变量提升(hoisting)的深入理解,包括了JS中作用域和变量提升(hoisting)的深入理解的使用技巧和注意事项,需要的朋友参考一下 作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域;事实上,不光是初学者。我就见过一些有经验的javascript程序员,但他们对scope理解不深。javascript作用域之所以迷惑,是因为