函数声明和函数表达式——函数声明的声明提前

写在前面的那些不得不说的废话

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

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.的正确结果的。

结合上面的myvin is handsome.例子,函数声明提前的结论似乎很好理解,不就是在使用函数声明的函数定义方法的时候,函数调用可以放在任意位置嘛。对啊,你说的很对啊,小伙伴,我都不知道怎么反驳你了。那就容我再扯几句。

从小伙伴所说的

不就是在使用函数声明的函数定义方法的时候,函数调用可以放在任意位置嘛

可以引出一点:

函数声明提前的时候,函数声明和函数体均提前了。

而且:

函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行(人家都执行过了自然就不再执行了)。

上面是一点。

函数表达式为什么不能声明提前

我们再说一点:为什么函数表达式不能像函数声明那样进行函数声明提前呢?

辛亏我知道一点儿,否则真不知道我该怎么回答呢?

咳咳,按照我的理解给小伙伴们解释一下下:

我们上面说了var的声明提前,注意我上面提过的:

只是声明被提前,初始化不提前,初始化还在原来初始化的位置进行初始化

Ok,我们把函数表达式摆在这看看:

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

函数表达式就是把函数定义的方式写成表达式的方式(貌似是白说,但是这对于解释和理解为毛函数表达式不能函数声明提前具有良好的疗效),就是把一个函数对象赋值给一个变量,所以我们把函数表达式写成这个样子:

var varible=5

看到这,也许小伙伴们会明白了,一个是把一个值赋值给一个变量,一个是把函数对象赋值给一个变量,所以对于函数表达式,变量赋值是不会提前的,即function(arg1, arg2, ...){<!-- function body -->}是不会提前的,所以函数定义并没有被执行,所以函数表达式不能像函数声明那样进行函数声明提前。

函数声明提前的实例分析

还是那句话,还是例子来的实在:

sayTruth();
if(1){
    function sayTruth(){alert(‘myvin is handsome‘)};
}
else{
    function sayTruth(){alert(‘myvin is ugly‘)};
}

在浏览器不抛出错误的情况下(请自行测试相应的浏览器是否有抛出错误的情况,为啥我不测试?我能说我懒么。。。),浏览器的输出结果是输出myvin is ugly(我不愿承认,但是事实就是这样啊啊啊啊,难道道出了人丑就该多读书??????)。

为什么呢?当然是声明提前了。因为函数声明提前,所以函数声明会在代码执行前进行解析,执行顺序是这样的,先解析function sayTruth(){alert(‘myvin is handsome‘)},在解析function sayTruth(){alert(‘myvin is ugly‘)},覆盖了前面的函数声明,当我们调用sayTruth()函数的时候,也就是到了代码执行期间,声明会被忽略,所以自然会输出myvin is ugly(好残酷的现实。。。)。忘了的可以看上面说过的:

函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行了(人家都执行过了自然就不再执行了)。

小了个结

关于函数声明的函数提前(提升)就聊到这里先,希望我的理解和扯淡能够对有需要的小伙伴有所帮助。

当然,实践出真知。对事物的了解、认知和运用还是在于多看多用多总结,记得有句名言,是讲声明和实践的:“动起来,为新的声明喝彩。”。

时间: 2024-10-26 10:15:22

函数声明和函数表达式——函数声明的声明提前的相关文章

[转] 函数声明和函数表达式——函数声明的声明提前

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

为什么if else 语句里不能用函数声明定义函数,而可以用函数表达式定义函数

在<JavaScript高级程序设计>第三版第7章函数表达式部分讲到,定义函数有两种方式:一种是函数声明,另一种就是函数表达式.函数声明的语法是这样的.function functionName(arg0, arg1, arg2) {//函数体} 关于函数声明,它的一个重要特征就是函数声明提升( function declaration hoisting),意思是在执行代码之前会先读取函数声明.这就意味着可以把函数声明放在调用它的语句后面.sayHi();function sayHi(){al

JS执行顺序-函数声明提升、匿名函数、函数表达式

大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - 高程三 5.深入理解变量声明提升和函数声明提升 因为没有好好地分类.可能会比较杂.为了系统地学习,先了解几个概念. 一. <script> 区分的代码块. JS是按照代码块 编译 和 执行的.代码块间 相互独立,但是 变量和方法 共享. <script> alert('代码块一'); </script> <

声明带返回值得函数

函数:做一件事参数:做一件事需要的额外条件返回值: 事情做完后产生的结果 函数声明的语法:static 返回类型 函数名(形参列表){ //函数}返回类型:函数完成后产生的结果的类型void 是一种特殊的返回类型,表示无返回类型 声明带返回值得函数示例: 得到两个整数相加的结果static int Add(int a , int b{ int result = a + b; return result; → 或 return a + b:} 示例:判断一个数是不是奇数static bool Is

在虚函数的声明的参数列表后加上“=0”就将函数变成了纯虚函数

在虚函数的声明的参数列表后加上“=0”就将函数变成了纯虚函数class Base{ virtual void function()=0;}我们不需要为纯虚函数Base::function()提供任何定义,那些声明了纯虚函数的类就是抽象类.任何试图创建一个抽象类对象的操作都会导致编译器错误.如果一个派生Base并且重写了Base::function()函数,它就成为了具体的类.class Derived :public Basae { void function(); } 通常将抽象类用作接口声明

声明带参数的函数

总结:要完成一个动作,需要知道额外条件,就是参数声明函数时,参数必须包含数据类型和参数名在函数体中,可以将参数当做变量使用参数的作用域:仅在函数体中有效声明带参数的函数 参数在函数体中的应用 在函数体中,可以将参数当做已经声明的变量来使用参数的作用域:仅在函数体中有效 static void 函数名(参数列表){ //注释内容}参数列表书写方法:数据类型 参数名, 数据类型 参数名,---- 案例:输出两个整数相加的结果static void Add(int a,int b){ Console.

cuda编程:不要在一个cpp文件中声明__device__和__global__函数

比如一下代码是正常的: kernel.h extern __global__ void kernel(); kernel.cu #include <stdio.h> #include "kernel.h" __global__ void kernel() { printf("hello world!"); } test.cu #include "kernel.h" int main(void) { kernel<<<

C++ 理解函数对象与lambda表达式

参考<21天学通C++>第21与第22章节,对函数对象进行介绍,同时通过lambda表达式这一匿名函数对象的简洁方式加深对函数对象的理解.本篇博文的主要内容是: (1) 函数对象的概念: (2) 将函数对象用作谓词: (3) 如何使用函数对象实现一元.二元谓词: (4) 如何编写lambda表达式: (5) 如何将lambda表达式用作谓词: (6) 如何编写可存储和可操作状态的lambda表达式. 一. 函数对象 1. 函数对象的概念和种类 函数对象是C++实体,从概念上讲,函数对象是用作函

转载 C#匿名函数 委托和Lambda表达式

转载原出处: http://blog.csdn.net/honantic/article/details/46331875 匿名函数 匿名函数(Anonymous Function)是表示“内联”方法定义的表达式.匿名函数本身及其内部没有值或者类型,但是可以转换为兼容的委托或者表达式树类型(了解详情).匿名函数转换的计算取决于转换的目标类型:如果是委托类型,则转换计算为引用匿名函数所定义的方法的委托:如果是表达式树类型,则转换将计算以对象结构形式表示方法结构的表达式树.  匿名函数有两种语法风格