JavaScript中具名函數的多種呼叫方式總結_javascript技巧

前面有一篇提到了 匿名函數的多種呼叫方式。這篇看看具名函數的多種呼叫方式。

1、() 

平常最常用的就是()運算子來呼叫/執行一個函數:

複製程式碼 程式碼如下:

// 無參函數fun1
function fun1() {
    alert('我被召喚了');
}
fun1();
 
// 有參函數fun2
function fun2(param) {
    alert(param);
}
fun2('我被呼叫了');

ECMAScript3後加入Function加入了call和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,['我被呼叫了'])

雖然call，apply可以純粹的用來呼叫/執行函數，但它們更多是用來改變函數執行的上下文。

4、new （不建議使用這種方式哦 ）

複製程式碼 程式碼如下:

// 無參函數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方式呼叫的細節。