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

JavaScript 函数调用方式概览

在 JavaScript 中，调用一个具名函数最常见的方式是使用小括号运算符。

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

使用 call 和 apply 调用函数

自 ECMAScript 3 标准引入 Function.prototype.call 和 Function.prototype.apply 方法后，函数调用方式扩展为以下两种。

2、call

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

3、apply

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

使用 new 关键字调用函数

4、new

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

从上述示例来看，这四种调用方式在函数执行结果上看似没有区别。然而，当函数包含返回值时，使用 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方式调用的细节。