函数声明和函数表达式

日期:2020年07月22日 阅读次数:1686 分类:javascript

函数表达式是javascript中的一个既强大又容易令人困惑的特性。定义函数的方式有两种:一种是函数声明,另一种就是函数表达式。

一、语法格式

1.1、函数声明

function functionName (arg0, arg1, arg2) {
  // 函数体
}

1.2、函数表达式

var functionName = function (arg0, arg1, arg2) {
  // 函数体
}

// 或

var functionName = function fn (arg0, arg1, arg2) {
  // 函数体
}

函数名可写可不写,有名叫“命名函数表达式”,无名叫“匿名函数表达式”

常见格式如下

function aaa(){}          // 函数声明

var aaa = function a (){} // 命名函数表达式
var aaa = function (){}   // 匿名函数表达式

1.3、把函数声明转到函数表达式

函数放在()中,或者加位运算符,都会变成函数表达式。如下

(function aaa() {})
~function aaa() {}
-function aaa() {}
+function aaa() {}
!function aaa() {}

二、函数声明和函数表达式的区别

2.1、函数表达式可以直接在后面加括号执行,而函数声明是不可以的。

function aaa() { alert(1); }();           //报错

var a = function aaa() { alert(1); }();   //直接执行,弹出1
~function aaa() { alert(1); }();          //直接执行,弹出1

2.2、函数声明可以被提前解析出来(即:【函数预解析】或【函数提升】)

因为函数声明有一个重要特征就是【函数声明提升】,意思是在执行代码之前会先读取函数声明。这就意味着可以把函数声明放在调用它的语句后面。

sayHi();
function sayHi () {
  alert("Hi!");
}

函数表达式与其它表达式一样,在使用前必须先赋值。以下代码会导致错误。

sayHi();       // 错误:函数还不存在
var sayHi = function  () {
  alert("Hi!");
}

函数声明提升的实例

这种情况下使用【函数声明】会有问题

if(true){
    function aaa(){ alert(1); }
}else{
    function aaa(){ alert(2); }
}

aaa();
// 在部分浏览器下结果是1,在IE下结果是2
// 因为函数已经被预解析,if判断已经没有意义

使用【函数表达式】则没有问题

if(true){
    var a= function aaa(){ alert(1); }
}else{
    var a = function aaa(){ alert(2); }
}

a();
// 在部分浏览器下结果是1,在IE(IE8以下)下结果也是1

aaa();
// 使用【命名函数表达式】的时候,IE(IE8以下)下结果是2,其它浏览器下报错。所以不建议使用【命名函数表达式】。
// 但是在使用debugger的时候,需要用到【命名函数表达式】。
文章标签: