首頁  >  文章  >  web前端  >  javascript中函數定義以及宣告和表達式區別實例詳解

javascript中函數定義以及宣告和表達式區別實例詳解

伊谢尔伦
伊谢尔伦原創
2017-07-21 13:48:461539瀏覽

在js中,函數實際上是一個對象,每個函數都是Function類型的實例,並且都與其他引用類型一樣具有屬性和方法。 因此,函數名稱其實是指向函數物件的指針,不與某個函數綁定。在常見的兩種定義方式(見下文)之外,還有一種定義的方式能更直觀的體現出這個概念:


var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐

  Function的建構函數可以接收任意數量的參數,但最後一個參數總是被看做函數體。這種方式有個缺點是,會導致解析兩次程式碼,第一次是基礎的ES程式碼解析,第二次是解析傳入建構函數中的字串,這樣會導致效能的下降,在此寫出是幫助理解js中函數其實是物件這個概念。

 (一)js函數沒有重載的概念

  說到重載的概念,我們來類比Java中的重載是怎麼實現的:在Java中,方法是透過方法簽名來唯一標識一個方法。方法簽名包括:方法名稱、參數數量、參數順序和參數類型這幾個要素。因此兩個方法的方法名稱相同,而其他簽章要素不同,編譯器就會認為是兩個不同方法,因此可以存在同名的不同方法,以實現重載的概念。 (引用:怎麼深入理解js中為什麼沒有重載呢--segmentfault 中manxisuo的回答)。

  而上面我們說過,js中的函數名實際上是指向函數對象的指針,因此函數名可以說是一個函數的唯一標識,跟參數列表並沒有關係,因此並不會出現同名的兩個函數(因為一個指標同時只能指向一個物件)從而不存在重載的概念。 舉個栗子:


function sum(num1, num2){
return num1 + num2;
}
function sum(num1, num2, num3){
return num1 + num2 + num3;
}

上面這種可以換一種寫法,會比較直觀一些:


##

var sum = function(num1, num2){
return num1 + num2;
}
sum = function(num1, num2, num3){
return num1 + num2 + num3;
}

這樣就很明顯可以看出,上面一行將sum指向function(num1,num2),而接下來又將sum指向function(num1, num2, num3),從而造成第二次的指向覆蓋了第一次的,因此更明顯的看出js中並沒有重載的概念。

(二)函數宣告和函數表達式的差異

我們知道,常用的定義函數方法有兩個:函數宣告和函數表達式。

函數聲明,可以說是最常見的定義方法,如下例:


function sum(num1, num2){
return num1 + num2;
}

函數表達式,這種定義方式在閉包及一些框架中使用較多,例如angular中常見的$scope.doSomething = function(){...}:


sum = function(num1, num2){
return num1 + num2;
};

上述兩種定義方法幾乎是相同的,但有一點小區別,請看下面這個例子:


#

//函数声明
alert(sum(100, 100));
function sum(num1, num2){
return num1 + num2;
}
//函数表达式
alert(sum(100, 100));
var sum = function(num1, num2){
return num1 + num2;
};

這兩段程式碼看起來差異不大,只是函數定義的方式不同而已。但事實是,第一段可以正常運作而第二段則會報錯。這是因為,在程式碼開始執行之前,解析器就已經透過一個名為函數宣告提升的過程,讀取並將函數宣告新增至執行環境。簡單來說,解析器會先將函數宣告放在原始碼樹的頂端。而下面那段程式碼,函數位於一個初始化語句中(並不會將其提升到頂部),簡單來說,在執行到這個賦值語句之前,sum並未指向任何一個函數,因此在之前呼叫函數則會報錯誤。

以上是javascript中函數定義以及宣告和表達式區別實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn