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

js代码执行前,会有一个预编译过程,该过程主要进行以下操作:语法检查,和声明提升。

美高梅电子游戏,如何将 函数声明 / 变量 “移动”
到作用域的顶部。

声明提升,又分为两部分:变量声明提升和函数声明提升。

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

声明提升的主要表现:先使用后声明。

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

变量声明提升:在当前代码块执行前,所有变量声明会在预编译阶段提前完成,所有变量被赋值为undefined,可以理解为变量提前创建。

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

console.log(num);//undefined

请考虑以下示例:

var num = 100;

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'
}

/*以上代码可以理解为:

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

var num;

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

console.log(num);

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

num = 100;

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

*/

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

函数声明提升:函数对象在预编译阶段,已经完全创建完毕,可以随时使用。函数声明提升高于变量声明。

美高梅电子游戏 1

fn();

上述示例代码的调用栈:

 function fn(){

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

     console.log(“我被提前创建完成!”)//我被提前创建完成!

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

}

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

//同时声明变量a和函数a

美高梅电子游戏 2

vara;

注:

functiona() {}

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

alert(typeofa);//显示的是”function”,初步证明function的优先级高于var。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章