函数声明的两种形式的区别

 我们知道关键字function用来定义函数;函数定义可以写成函数定义表达式,也可以写成语句的形式。例如下面的两种写法

1. 变量声明提升

var f = function(x){return x+1;}   //将表达式赋值给一个变量  函数表达式
function f(x){return x+1;}         //含有变量的语句        函数声明

1.1 变量定义

可以使用var定义变量,变量如果没有赋值,那变量的初始值为undefined。

尽管函数声明语句和函数定义表达式包含相同的函数名;但它们之间还是有区别的。

1.2 变量作用域

变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义;而局部变量只能在函数内有效。
在函数体内,同名的局部变量或者参数的优先级会高于全局变量。也就是说,如果函数内存在和全局变量同名的局部变量或者参数,那么全局变量将会被局部变量覆盖。
所有不使用var定义的变量都视为全局变量

相同点:两种方式都创建了新的函数对象;两者都会被“提前”(函数语句中定义的函数被显示的提前到脚本或则函数的顶部,因此它们在整个脚本内可见);

1.3 函数作用域和声明提前

JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的,也就是说变量在声明之前已经可用,所有这特性称为声明提前(hoisting),即JavaScript函数里的所有声明(只是声明,但不涉及赋值)都被提前到函数体的顶部,而变量赋值操作留在原来的位置。如下面例子:
注释:声明提前是在JavaScript引擎的预编译时进行,是在代码开始运行之前。

var scope = 'global';
function f(){
    console.log(scope);
    var scope = 'local';
    console.log(scope);
}

由于函数内声明提升,所以上面的代码实际上是这样的

var scope = 'global';
function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

经过这样变形之后,答案就就非常明显了。由于scope在第一个console.log(scope)语句之前就已经定义了,但是并没有赋值,因此此时scope的指是undefined.第二个console.log(scope)语句之前,scope已经完成赋值为’local’,所以输出的结果是local。

不同点:函数声明语句中函数名是一个变量名,变量指向函数对象。和通过var声明变量一样,函数语句中定义的函数被显示的提前到脚本或则函数的顶部,因此它们在整个脚本内可见;

2. 函数声明提升

1.使用var只有变量声明提前--变量的初始化任然在原来的位置,然而使用函数声明语句的话函数名称和函数体均提前

2.1 函数的两种创建方式

  • 函数声明
  • 函数表达式

总结:简单的说函数表达式的方式(也就是var声明方式)函数只有在var语句声明之后才能被调用;而函数声明(也就是function声明方式)函数可以在函数声明之前调用。

2.2 函数声明语法

f('superman');
function f(name){
    console.log(name);
}

运行上面的程序,控制台能打印出supemran。

这些情况是   因为函数表达式是在函数运行的阶段才赋值给变量f;而函数声明在代码运行之前,也就是代码解析阶段就已经赋值给了变量f

2.3 函数表达式语法

f('superman');
var f= function(name){
    console.log(name);
}

运行上面的代码,会报错Uncaught ReferenceError: f is not defined(…),错误信息显示说f没有被定义。
为什么同样的代码,函数声明和函数表达式存在着差异呢?
这是因为,函数声明有一个非常重要的特征:函数声明提升,函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部(是不是跟变量提升非常类似)。正是因为这个特征,所以可以把函数声明放在调用它的语句后面。如下面例子,最终的输出结果应该是什么?:

var getName = function(){
    console.log(2);
}
function getName (){
    console.log(1);
}
getName();

可能会有人觉得最后输出的结果是1。让我们来分析一下,这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升,函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下,getName也是一个变量,因此这个变量的声明也将提升到底部,而变量的赋值依然保留在原来的位置。因此上面的函数可以转换成下面的样子:

var getName;    //变量声明提升
function getName(){    //函数声明提升到顶部
    console.log(1);
}
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出:2

所以最终的输出结果是:2。在原来的例子中,函数声明虽然是在函数表达式后面,但由于函数声明提升到顶部,因此后面getName又被函数表达式的赋值操作给覆盖了,所以输出2。

本文由金沙官网线上发布于Web前端,转载请注明出处:函数声明的两种形式的区别

您可能还会对下面的文章感兴趣: