JavaScript Function类型解析：函数声明、表达式与构造器对比

本文通过具体实例详细解析JavaScript中的引用类型Function，旨在为读者提供清晰的参考与学习素材。

Function类型基础

在JavaScript中，函数本质上是对象，而函数名仅仅是指向该函数对象的指针。这意味着函数名并不与特定函数严格绑定，同一个函数对象可以被多个不同的变量引用。


function getSum(a, b) {
  return a + b;
}
alert(getSum(2, 3));//5
var copy = getSum;
alert(copy(2, 3));//5
getSum = null;
alert(copy(2, 3));//5

函数的三种定义方式

JavaScript中定义函数主要有三种方式：函数声明、函数表达式以及Function构造函数。

Function构造函数可以接收任意数量的参数，其中前面的参数用于列举函数名，最后一个参数则是函数体的字符串。由于性能和可读性原因，通常不推荐使用Function构造函数来定义函数。


var getSum = new Function("a", "b", "return a + b";

JavaScript语言本身不支持函数重载机制。如果声明了两个同名函数，后声明的函数会覆盖先前的函数定义。

由于函数名本质上是变量，因此函数可以作为值进行传递。这不仅允许将函数作为参数传递给其他函数，也允许将函数作为返回值返回。


function callFunction(func, arguments) {
  return func(arguments);
}
function sayHello(name) {
  return "Hello, " + name;
}
var result = callFunction(sayHello, "Alice");
alert(result);//Hello, Alice

函数声明

第一种定义方式是函数声明。

其语法结构为：function 函数名称(参数|可选) { 函数体 }。

具体示例如下。


function func1(){// 声明，程序的一部分
  function func() {// 声明，函数体的一部分
    ...//函数体
  }
}

函数表达式

第二种定义方式是函数表达式。

其语法结构为：function 函数名称|可选(参数|可选) { 函数体 }。

示例1展示了将匿名函数赋值给变量的情况。


var fun = function func() {};//表达式，赋值表达式的一部分

示例2展示了使用new关键字结合函数表达式的情况。


new function func(){};//表达式，new表达式

示例3展示了将函数表达式置于分组操作符括号内的情况。


(function func(){});
//表达式，包含在分组操作符——括号()内，括号()内只能包含表达式

示例4展示了将函数表达式置于数组初始化器中的情况。


[function func() {}];//表达式，数组初始化器内只能是表达式

示例5展示了将函数表达式置于逗号表达式中的情况。


1, function func() {};//表达式，逗号只能操作表达式

函数构造器

第三种定义方式是使用函数构造器。

由函数构造器创建的函数，其[[Scope]]属性仅包含全局对象，不包含创建时的局部作用域。


<script>
  var a = 1;
  func1();
  function func1() {
    var a = 2;
    var b = 3;
    var func2 = new Function("alert(a); alert(b);");
    func2();//1,b is not defined
  }
</script>

例如，由函数构造器创建的函数func2可以从全局对象中获取变量a的值，但由于全局对象中不存在变量b，因此执行时会报错提示b未定义。

函数声明与表达式的区别

接下来详细分析函数声明与函数表达式之间的核心区别。

首先，两者在上下文创建阶段的行为不同。函数声明在进入上下文阶段时即被创建，因此在代码执行阶段已可用，具备提升特性；而函数表达式仅在代码执行到该语句时才被创建，因此不具备提升特性。

函数声明提升示例展示了在定义前调用函数仍能正常执行的情况。


func();//Function declaration
function func(){
  alert("Function declaration");
}

函数表达式不能提升示例展示了在定义前调用函数会报错的情况。


func();//报错：func is not a function
var func = function (){
  alert("Function expression");
}

其次，函数声明会影响变量对象（VO），即存储在上下文VO中的变量对象；而函数表达式不影响变量对象VO，它不存在于变量对象中。这意味着无法在声明前通过名称调用函数声明，也无法在声明后通过名称调用函数表达式（但在递归调用中，函数表达式可以通过名称调用自身）。

示例1展示了函数声明在变量对象中的存在情况。


alert(func); //报错：func is not a function。定义之前不可用，因为它在代码执行阶段创建
(function func() {});
alert(func); //报错：func is not a function。定义之后也不可用，因为它不在变量对象VO中

示例2展示了函数表达式在递归调用中通过名称调用自身的情况，但外部无法通过名称访问。


(function func(param) {
  if (param) {
    return;
  }
  func(true);//func可用，递归调用可以通过名称调用自身
})();
func(); // func is not a function，外部不可用

第三，函数声明只能出现在程序顶层或函数体内，不能出现在表达式或代码块（如if、while、for语句）中，因为JavaScript没有块级作用域，只有函数和全局作用域。而函数表达式可以出现在任何表达式允许的位置。

在函数声明的块级作用域测试中，不同浏览器的行为可能不一致，有的返回if分支结果，有的返回else分支结果。


if (true) {
  function func() {
    alert('if');
  }
}
else {
  function func() {
    alert('else');
  }
}
func();

在函数表达式的块级作用域测试中，所有浏览器均返回if分支结果，行为一致。


var func;
if (true) {
  func = function() {
    alert('if');
  };
}
else {
  func = function() {
    alert('else');
  };
}
func();

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容能对大家的JavaScript程序设计有所帮助。

JavaScript引用类型Function详解：定义方式与作用域差异