浅析函数声明和函数表达式

前两天班级聚会,除了吃喝玩乐就是睡觉扯淡,甚是喜悦,真是独乐乐不如众乐乐啊。

PS:毕业的或即将毕业的有时间能聚就聚吧,毕了业以后属于自己的时间能聚到一块儿可就少太多了。

现在有点时间来看点东西总结些东西了,又因为前段时间片片断断地看了看JavaScript的函数部分,所以抽时间总结下函数的相关部分,当然,里面有些部分都是自己的理解,如果有理解的不对的地方还请小伙伴们不吝指出。

这一节我结合自己的理解和小伙伴们聊一下函数声明的声明提前。

注:有的地方也叫函数声明提升。翻译的不一样,意思一样,大家理解就行。理解万岁!

在聊函数声明的声明提前之前,有必要介绍下函数定义的几种方法,大部分小伙伴们应该都不陌生。了解的或者不想了解的就痛快地一滚轮滚下去吧,不熟悉的或者想再熟悉一下的就放慢脚步起步走。

定义函数的方法

定义函数的方法主要有三种:

1.函数声明(Function Declaration)
2.函数表达式Function Expression)
3.new Function构造函数
其中,经常使用的是函数声明和函数表达式的函数定义方法,这两种方法有着很微妙的区别和联系,而且这两种方法的使用也容易混淆,所以这篇文章主要总结下这两种函数定义方法的相关知识点,当然本文的主题依然是关于函数提前的。

函数声明的典型格式:

function functionName(arg1, arg2, ...){ <!-- function body --> }

函数表达式

•函数表达式的典型格式:

var variable=function(arg1, arg2, ...){ <!-- function body --> }

包含名称(括弧,函数名)的函数表达式:

var variable=function functionName(arg1, arg2, ...){ <!-- function body --> }

像上面的带有名称的函数表达式可以用来递归:

var variable=function functionName(x){ if(x<=1) return 1; else return x*functionName(x); }

声明提前

var声明提前

小伙伴们应该都听说过声明提前的说法,我想在此再次重申一遍,因为声明提前是函数声明和函数表达式的一个重要区别,对于我们进一步理解这两种函数定义方法有着重要的意义。

但是再说函数声明提前之前呢,有必要说一下var声明提前。

先给出var声明提前的结论:

变量在声明它们的脚本或函数中都是有定义的,变量声明语句会被提前到脚本或函数的顶部。但是,变量初始化的操作还是在原来var语句的位置执行,在声明语句之前变量的值是undefined。

上面的结论中可以总结出三个简单的点:

1.变量声明会提前到函数的顶部;
2.只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化;
3.在声明之前变量的值是undefined。

还是来例子实在:

var handsome='handsome'; function handsomeToUgly(){ alert(handsome); var handsome='ugly'; alert(handsome); } handsomeToUgly();

正确的输出结果是:
先输出undefined,然后输出ugly。

错误的输出结果是:
先输出handsome,然后输出ugly。

这里正是变量声明提前起到的作用。该handsome局部变量在整个函数体内都是有定义的,在函数体内的handsome变量压住了,哦不对,是覆盖住了同名的handsome全局变量,因为变量声明提前,即var handsome被提前至函数的顶部,就是这个样子:

var handsome='handsome'; function handsomeToUgly(){ var handsome; alert(handsome); var handsome='ugly'; alert(handsome); } handsomeToUgly();

所以说在alert(handsome)之前,已经有了var handsome声明,由上面提到的

在声明之前变量的值是undefined
所以第一个输出undefined。

又因为上面提到的:

只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化
所以第二个输出ugly。

函数声明提前
接下俩我们结合var声明提前开始聊函数声明的声明提前。

函数声明的声明提前小伙伴们应该很熟悉,举个再熟悉不过的例子。

sayTruth();<!-- 函数声明 --> function sayTruth(){ alert('myvin is handsome.'); } sayTruth();<!-- 函数表达式 --> var sayTruth=function(){ alert('myvin is handsome.'); }

小伙伴们都知道,对于函数声明的函数定义方法,即上面的第一种函数调用方法是正确的,可以输出myvin is handsome.的真理,因为函数调用语句可以放在函数声明之后。而对于函数表达式的函数定义方法,即上面的第二种函数调用的方法是不能输出myvin is handsome.的正确结果的。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpsxg.html