跳至正文
首页 » 博客 » Easy JavaScript Part 5: Simplifying function hoisting

Easy JavaScript Part 5: Simplifying function hoisting

为了理解函数提升,让我们从下面列出的代码开始:

console.log(foo);var foo = 9; 


输出应该是什么?

在任何其他编程语言中,此处的输出将是引用错误但是,在JavaScript中,您将获得undefined作为输出。为什么?因为JavaScript将变量提升到执行上下文的顶部。执行上下文可以是声明变量的函数,也可以是声明变量的JavaScript文件。所以,让我们使用一个函数重写上面的代码片段:

函数abc() { console.log(foo);var foo = 9;} abc(); 

在这里,变量 “foo” 被悬挂在函数abc执行上下文的顶部; 这意味着您可以在声明foo之前访问它。简单地说,每当你声明一个变量时,JavaScript解释器会将它分成两个语句:

  1. 声明变量
  2. 分配

变量的声明位于执行上下文的顶部,赋值发生在创建变量的地方。所以上面的代码片段被分成两个语句,如下图所示:

变量foo被悬挂在函数abc的执行上下文的顶部,因此当你在声明之前使用它时,你会得到 “undefined” 作为输出。

请记住,使用let语句声明的变量不会被提升到执行上下文的顶部。

现在您了解了如何在JavaScript中提升变量,让我们探索JavaScript中的函数提升。在JavaScript中,可以通过两种方式创建函数:

  1. 函数作为声明
  2. 函数作为表达式

作为声明或语句创建的函数作为一个整体被提升到执行上下文的顶部。但是,作为表达式创建的函数像变量一样被提升。

为了说明这一点,让我们创建一个函数作为语句:

foo(); 函数foo() { console.log( "hello" );} 

上面,如果你在创建函数之前使用它,你会得到一个hello的输出。这是因为作为语句创建的函数作为一个整体被提升到执行上下文的顶部。

无论何时将函数创建为语句,都可以在创建函数之前使用该函数。因此,如果要在第5行中创建一个函数作为语句,则可以在第1-4行中使用该函数,因为函数语句是在执行上下文的顶部与函数体一起悬挂的。

函数语句被提升,函数体位于执行上下文

函数表达式像变量一样被提升到执行上下文的顶部。让我们考虑下面列出的代码:

foo(); var foo = 函数 () { console.log( "hello" );} 

在这里,您将函数foo创建为表达式,因此JavaScript将以与提升普通变量相同的方式提升它。JavaScript处理上面的代码如下图所示:

正如您在上图中看到的,foo被声明为执行上下文顶部的变量,但是变量foo中的函数赋值发生在第6行,其中函数被创建为表达式。所以,当你尝试执行上面列出的代码时,你会得到未定义不是函数的错误,如下图所示:

您不能在创建函数表达式之前使用它,因为只有函数声明在顶部被提升。

总结:

  1. 函数语句与位于执行上下文顶部的函数体一起被提升。您可以在创建函数之前将其创建为语句。
  2. 函数表达式在创建之前不能使用。只有声明部分被提升,并且赋值发生在创建函数的行中。

在这个 “Easy JavaScript” 系列的下一篇文章中,您将了解JavaScript中更重要的概念,敬请期待。另外,不要忘记查看Ignite UI for JavaScript/HTML5和ASP.NET MVC ,您可以将其与HTML5,Angular,React和ASP.NET MVC一起使用来创建富Internet应用程序。您可以免费下载试用版我们所有的JavaScript控件!</p