轻松学习 JavaScript(5):简化函数提升
2017-11-21 00:00
330 查看
(点击上方公众号,可快速关注)
英文: Dhananjay Kumar 译文:码农网/小峰
http://www.codeceo.com/article/easy-javascript-05-hoisting.html
如果好文章投稿,点击
→ 了解详情
《轻松学习
JavaScript (1):了解 let 语句》
《轻松学习
JavaScript (2):函数中的 Rest 参数》
《轻松学习
JavaScript (3):函数中的默认参数》
《轻松学习
JavaScript (4):函数中的 arguments 对象》
为了理解函数提升,让我们从以下代码开启我们的学习之旅:
console.log(foo);
var
foo
= 9;
应该输出什么呢?
在任何其他编程语言中,这里的输出将会是reference error。但是,在JavaScript中,你将得到undefined作为输出。为什么?因为JavaScript会提升变量到执行上下文的顶部。执行上下文可以是声明变量的函数,也可以是声明变量的JavaScript文件。所以,让我们用函数重写上面的代码片段:
function
abc()
{
console.log(foo);
var
foo
= 9;
}
abc();
这里,变量“foo”提升到函数abc执行上下文的顶部;这意味着你可以在声明之前访问foo。简而言之,无论何时你声明一个变量,JavaScript解释器都可以将其分成两个语句:
声明一个变量。
赋值。
变量的声明位于执行上下文的顶部,而赋值发生在创建变量的位置。所以上面的代码片段被分解成两个语句,如下图所示:Hoisting-1
变量foo被提升到函数abc的执行上下文的顶部,因此当你在声明之前使用它时,你会得到“undefined”作为输出。
请记住,使用let语句声明的变量不会被提升到执行上下文的顶部。
现在你知道JavaScript中的变量是如何被提升的了,接下来让我们来探讨JavaScript中的函数提升。在JavaScript中,可以通过两种方式来创建函数:
作为声明而创建的函数。
作为表达式而创建的函数。
作为声明或语句创建的函数作为一个整体提升到执行上下文的顶部。但是,作为表达式创建的函数会像变量一样提升。
为了说明这一点,让我们创建一个作为语句的函数:
foo();
function
foo()
{
console.log("hello");
}
在上面的代码中,如果你在函数创建之前使用函数,那么你会得到hello的输出。发生这种情况的原因是,作为语句创建的函数会当作一个整体被提升到执行上下文的顶部。
无论何时创建作为语句的函数,都可以在函数创建之前使用该函数。因此,如果你在第5行创建作为语句的函数,那么你可以在第1-4行中使用该函数,因为函数语句会随函数主体一起提升到执行上下文的顶部。
函数语句会随函数主体一起提升到执行上下文的顶部。
函数表达式会像一个变量一样被提升到执行上下文的顶部。请看下面的代码:
foo();
var
foo
= function
()
{
console.log("hello");
}
你正在代码中创建函数foo作为表达式,所以JavaScript会像普通变量一样提升它。 JavaScript会像下图所示那样处理上面的代码:
正如你在上面的图片中看到的那样,foo在执行上下文的顶部被声明为一个变量,然而,在变量foo中的函数赋值发生在第6行,也就是创建作为表达式函数的地方。所以,当你尝试执行上面的代码时,你会得到错误undefined is not a function,如下图所示:
因此,你不能在函数表达式被创建之前使用函数表达式,因为只有函数声明会提升到顶部。
综上所述:
函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。
函数表达式在创建之前不能使用。只有声明部分会被提升,赋值发生在创建函数的那一行。
在“轻松学习JavaScript”系列的下一篇文章中,我们将介绍JavaScript中更为重要的概念,敬请期待。
觉得本文对你有帮助?请分享给更多人
关注「前端大全」,提升前端技能
英文: Dhananjay Kumar 译文:码农网/小峰
http://www.codeceo.com/article/easy-javascript-05-hoisting.html
如果好文章投稿,点击
→ 了解详情
《轻松学习
JavaScript (1):了解 let 语句》
《轻松学习
JavaScript (2):函数中的 Rest 参数》
《轻松学习
JavaScript (3):函数中的默认参数》
《轻松学习
JavaScript (4):函数中的 arguments 对象》
为了理解函数提升,让我们从以下代码开启我们的学习之旅:
console.log(foo);
var
foo
= 9;
应该输出什么呢?
在任何其他编程语言中,这里的输出将会是reference error。但是,在JavaScript中,你将得到undefined作为输出。为什么?因为JavaScript会提升变量到执行上下文的顶部。执行上下文可以是声明变量的函数,也可以是声明变量的JavaScript文件。所以,让我们用函数重写上面的代码片段:
function
abc()
{
console.log(foo);
var
foo
= 9;
}
abc();
这里,变量“foo”提升到函数abc执行上下文的顶部;这意味着你可以在声明之前访问foo。简而言之,无论何时你声明一个变量,JavaScript解释器都可以将其分成两个语句:
声明一个变量。
赋值。
变量的声明位于执行上下文的顶部,而赋值发生在创建变量的位置。所以上面的代码片段被分解成两个语句,如下图所示:Hoisting-1
变量foo被提升到函数abc的执行上下文的顶部,因此当你在声明之前使用它时,你会得到“undefined”作为输出。
请记住,使用let语句声明的变量不会被提升到执行上下文的顶部。
现在你知道JavaScript中的变量是如何被提升的了,接下来让我们来探讨JavaScript中的函数提升。在JavaScript中,可以通过两种方式来创建函数:
作为声明而创建的函数。
作为表达式而创建的函数。
作为声明或语句创建的函数作为一个整体提升到执行上下文的顶部。但是,作为表达式创建的函数会像变量一样提升。
为了说明这一点,让我们创建一个作为语句的函数:
foo();
function
foo()
{
console.log("hello");
}
在上面的代码中,如果你在函数创建之前使用函数,那么你会得到hello的输出。发生这种情况的原因是,作为语句创建的函数会当作一个整体被提升到执行上下文的顶部。
无论何时创建作为语句的函数,都可以在函数创建之前使用该函数。因此,如果你在第5行创建作为语句的函数,那么你可以在第1-4行中使用该函数,因为函数语句会随函数主体一起提升到执行上下文的顶部。
函数语句会随函数主体一起提升到执行上下文的顶部。
函数表达式会像一个变量一样被提升到执行上下文的顶部。请看下面的代码:
foo();
var
foo
= function
()
{
console.log("hello");
}
你正在代码中创建函数foo作为表达式,所以JavaScript会像普通变量一样提升它。 JavaScript会像下图所示那样处理上面的代码:
正如你在上面的图片中看到的那样,foo在执行上下文的顶部被声明为一个变量,然而,在变量foo中的函数赋值发生在第6行,也就是创建作为表达式函数的地方。所以,当你尝试执行上面的代码时,你会得到错误undefined is not a function,如下图所示:
因此,你不能在函数表达式被创建之前使用函数表达式,因为只有函数声明会提升到顶部。
综上所述:
函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。
函数表达式在创建之前不能使用。只有声明部分会被提升,赋值发生在创建函数的那一行。
在“轻松学习JavaScript”系列的下一篇文章中,我们将介绍JavaScript中更为重要的概念,敬请期待。
觉得本文对你有帮助?请分享给更多人
关注「前端大全」,提升前端技能
相关文章推荐
- 轻松学习 JavaScript——第 5 部分:简化函数提升
- 轻松学习 JavaScript——第 5 部分:简化函数提升
- 轻松学习JavaScript二十八:DOM编程学习之事件处理函数
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- 轻松学习 JavaScript (3):函数中的默认参数
- 【JavaScript学习笔记】7:函数提升,变量提升,异常抛掷和捕获,ES6的Map和Set
- 轻松学习 JavaScript (2):函数中的 Rest 参数
- 轻松学习 JavaScript (4):函数中的 arguments 对象
- 轻松学习 JavaScript(6):JavaScript 箭头函数
- javascript学习——变量提升和方法(函数)提升
- JavaScript学习笔记(十一) 函数name属性和函数的提升
- 轻松学习 JavaScript——第 4 部分:函数中的 arguments 对象
- 跟我学习javascript的var预解析与函数声明提升
- 轻松学习 JavaScript——第 2 部分:函数中的 Rest 参数
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第33讲_Object类_闭包_成员函数再说明_聪明的猪小练习_学习笔记_源代码图解_PPT文档整理
- 轻松学习 JavaScript——第 3 部分:函数中的默认参数
- JavaScript中变量和函数的提升学习
- 跟我学习javascript的var预解析与函数声明提升
- 轻松学习 JavaScript——第 4 部分:函数中的 arguments 对象
- 轻松学习 JavaScript——第 3 部分:函数中的默认参数