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

姓名:贾田田      学号:17101223395

【嵌牛导读】:轻松学习javascripe,学习简化函数。

【嵌牛鼻子】:javascripe,简化函数

【嵌牛问题】:如何提升简化函数?

【嵌牛正文】:

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

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解释器都可以将其分成两个语句:

      声明一个变量;

      赋值;

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

图片发自简书App

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

图片发自简书App

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

图片发自简书App

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

综上所述:

函数语句随函数主体一起被提升到执行上下文的顶部。你可以在函数创建之前使用作为语句创建的函数。

函数表达式在创建之前不能使用。只有声明部分会被提升,赋值发生在创建函数的那一行。

在“轻松学习JavaScript”系列的下一篇文章中,我们将介绍JavaScript中更为重要的概念,敬请期待。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • 由于有了身孕,在外地一个人有些照顾不了自己,所以回家了。妈妈开始照顾我。 回来之前还有些焦虑,妈妈一直...
    chipinwind阅读 224评论 1 1
  • 如果没有不可逆的原因 我的心 就会晨露一般圆润 祁河水一般清澈 我要把思念的涟漪抚平 姿态优雅地等你 梳洗好纠结的...
    麦动文阅读 428评论 19 59
  • 双脚紧紧地抓住大地 抡起手中的大锤 拆一座腐城 建一个新城 让劳动光明正大成为城主 今天 我在加班 挥汗如雨 冲洗...
    鸿蒙一叶阅读 204评论 4 8
  • 来了青海以后,本来倒没觉得什么,但自从知道每年只有七天假,还有三天在路上,就好难过了。 第一次打电话给家里还很新鲜...
    lazylamb阅读 247评论 0 0