JavaScript具名函数调用方式：()、call、apply与new的区别

本文总结JavaScript中具名函数的四种调用方式：常规()运算符、Function.prototype.call、apply以及new关键字。重点解析call和apply在改变执行上下文时的应用，并深入探讨使用new调用普通函数时的副作用，特别是当返回值为基础类型与对象类型时的不同表现机制。

JavaScript具名函数的四种调用方式详解

前文曾探讨过匿名函数的多种调用形式，本文将重点分析具名函数的具体调用场景与差异。

日常开发中最常见的函数执行方式是通过()运算符直接调用或执行函数。

代码示例如下：

// 无参函数fun1
function fun1() {
alert('我被调用了');
}
fun1();
 
// 有参函数fun2
function fun2(param) {
alert(param);
}
fun2('我被调用了');

自ECMAScript 3标准引入Function原型方法后，衍生出以下两种特殊的调用机制。

代码示例如下：

// 无参函数fun1
function fun1() {
alert('我被调用了');
}
fun1.call(null);
 
// 有参函数fun2
function fun2(param) {
alert(param);
}
fun2.call(null,'我被调用了')

代码示例如下：

// 无参函数fun1
function fun1() {
alert('我被调用了');
}
fun1.apply(null);
 
// 有参函数fun2
function fun2(param) {
alert(param);
}
fun2.apply(null,['我被调用了'])

尽管call和apply均可用于单纯地执行函数，但它们的核心价值在于能够改变函数内部的this指向，即执行上下文。

代码示例如下：

// 无参函数fun1
function fun1() {
alert('我被调用了');
}
new fun1();
 
// 有参函数fun2
function fun2(param) {
alert(param);
}
new fun2('我被调用了')

new关键字的本质是用于创建或构造类的实例。此处定义的fun1和fun2显然并非标准的类定义（缺乏this引用及prototype属性），但函数体依然会被执行，这属于new关键字产生的副作用。

从上述四种调用方式来看，若函数无返回值，其执行结果并无区别。然而，若函数包含返回值，使用new方式调用时可能会出现意料之外的结果。

代码示例如下：

// 有返回值的函数fun
function fun() {
alert('我被调用了');
return "jack";
}
var c = new fun();
alert(c);//[object Object]，为什么不是"jack"？

若修改返回值为对象，则表现如下：

代码示例如下：

// 有返回值的函数fun
function fun() {
alert('我被调用了');
return {name:'jack'};
}
var c = new fun();
alert(c.name); //jack,又正常返回了

总结而言，使用new方式调用函数时，若存在返回值：当返回值为JavaScript内置的基础类型（如String、Number、Boolean等）时，该返回值将被忽略，不会直接返回；当返回值为对象、函数或数组等引用类型时，将直接返回该对象、函数或数组。

当返回值为基础类型时，new fun()实际返回的是什么？关于new方式调用的底层细节，将在后续文章中深入讨论。