轻松学习 JavaScript——第 5 部分:简化函数提升

为了理解函数提升,让我们从以下代码开启我们的学习之旅:

console.log(foo);
var foo = 9;</pre>

应该输出什么呢?

在任何其他编程语言中,这里的输出将会是reference error。但是,在JavaScript中,你将得到undefined作为输出。为什么?因为JavaScript会提升变量到执行上下文的顶部。执行上下文可以是声明变量的函数,也可以是声明变量的JavaScript文件。所以,让我们用函数重写上面的代码片段:

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

这里,变量“foo”提升到函数abc执行上下文的顶部;这意味着你可以在声明之前访问foo。简而言之,无论何时你声明一个变量,JavaScript解释器都可以将其分成两个语句:

  • 声明一个变量。
  • 赋值。

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

image

变量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会像下图所示那样处理上面的代码:

image

正如你在上面的图片中看到的那样,foo在执行上下文的顶部被声明为一个变量,然而,在变量foo中的函数赋值发生在第6行,也就是创建作为表达式函数的地方。所以,当你尝试执行上面的代码时,你会得到错误undefined is not a function,如下图所示:

image

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

综上所述:

  • 函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。
  • 函数表达式在创建之前不能使用。只有声明部分会被提升,赋值发生在创建函数的那一行。

欢迎加入学习交流群569772982,大家一起学习交流。

原文地址:https://www.cnblogs.com/z335/p/8270502.html

时间: 2024-10-14 00:16:25

轻松学习 JavaScript——第 5 部分:简化函数提升的相关文章

轻松学习JavaScript八:JavaScript函数

函数是一组可以随时随地运行的语句,函数作为ECMAScript的核心是很重要的.函数是由事件驱动的或者当它被 调用时执行的可重复使用的代码块.也就是函数是定义一次但却可以调用或执行任意多次的一段JavaScript代码.函 数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函 数调用表达式的值. 一函数声明 函数对于任何语言来说都是一个核心的概念.通过函数可以封装任意多条语句,而且可以在任何地方,任何时候 调用执行.JS中的函数使用functio

轻松学习JavaScript十八:JavaScript之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分.HTML或XML页面的每个部分都 是一个节点的衍生物.通过DOM,可访问HTML文档的所有元素.当网页被加载时,浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了访问HTML和XML文档的标准."W3C 文档对象模型(DOM)是中立

轻松学习JavaScript十三:JavaScript基于面向对象之继承(包含面向对象继承机制)

一面相对象继承机制 今天算是什么都没干,尽在了解面向对象三大特性之一的继承了,过去的学习的C++和C#都是正统的面向对象语 言,学习的时候也没有怎么深入了解过,只是简单的学习最基础的继承.下午在看继承机制的时候,看到一个很经典 的继承机制实例.这个实例使用UML很好的解释了继承机制. 说明继承机制最简单的方式是,利用一个经典的例子就是几何形状.实际上,几何形状只有两种,即椭圆形(是圆 形的)和多边形(具有一定数量的边).圆是椭圆的一种,它只有一个焦点.三角形.矩形和五边形都是多边形的一种, 具有

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

轻松学习JavaScript十一:JavaScript基本类型(包含类型转换)和引用类型

一值的类型 早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的 值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值. (1)原始值 存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. (2)引用值 存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处. 为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还是引用类型.要实现这一点,解释程序则需 尝试判断该值是否

怎样轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径.我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路".js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库.对象库就一大堆. C:混合多种编程思想.它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不大一样

分针网—每日分享: 怎么轻松学习JavaScript

js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想. 它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAVA,PHP)不

轻松学习javascript,首先你要傻一点

转自:宁采臣 js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想. 它里面不但牵涉面向过程编程思想,又有面向对象编程思想,同时,它的面向对象还和别的编程语言(如:C++,JAV

【转载】怎么轻松学习JavaScript

作者:宁哥1455153071链接:http://www.jianshu.com/p/cba0eeba2371來源:简书 js给初学者的印象总是那么的"杂而乱",相信很多初学者都在找轻松学习js的途径. 我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条"轻松学习js之路". js给人那种感觉的原因多半是因为它如下的特点: A:本身知识很抽象.晦涩难懂,如:闭包.内置对象.DOM. B:本身内容很多,如函数库,对象库就一大堆. C:混合多种编程思想.