在編寫JavaScript代碼中，函數(shù)是我們經常會寫到的。但是在不同的工程師寫到代碼中，函數(shù)的聲明方式卻都是不盡相同的，那函數(shù)的聲明方式到底有幾種，他們之間有什么區(qū)別呢？我們接下來就來好好說一說

老規(guī)矩我們先從定義下手

function，函數(shù)，是一個可以被其他代碼或其自身調用的代碼片段，或者是一個指向該函數(shù)的變量 。當函數(shù)被調用時，參數(shù)被作為輸入傳遞給函數(shù)，并且函數(shù)可以返回輸出。在 JavaScript 中，函數(shù)也是一個對象。

函數(shù)名是作為函數(shù)聲明或函數(shù)表達式的一部分聲明的標識符。函數(shù)的作用域取決于函數(shù)名是一個聲明還是表達式。

聲明函數(shù)的5種方法

1.Function聲明

Function也稱為函數(shù)語句或函數(shù)定義，是 JavaScript 中聲明函數(shù)的最常見方式。

函數(shù)聲明方法只是意味著我們將使用關鍵字function和function后的名稱來聲明函數(shù)。

function foo(){
    console.log('這是一個函數(shù)的打印結果')
}

在上面中“ function ”是關鍵字，“foo ”是函數(shù)名。

如果我們想調用這個函數(shù)，我們所要做的就是寫下它的名字，然后加上括號，如下所示：

foo()

函數(shù)可以接受參數(shù)。如果我們的數(shù)據(jù)是動態(tài)的，我們可以向函數(shù)傳遞多個參數(shù)。

假如我們希望在使用foo函數(shù)時，它會根據(jù)我們傳入的參數(shù)值，動態(tài)的打印我們的參數(shù)。

我們可以這樣寫：

function foo(arg){
     console.log('這是我們接收的參數(shù)'+arg)
     console.log(`這是我們接收的參數(shù)${arg}`)
}
foo("zayyo")

2.匿名函數(shù)

匿名函數(shù)顧名思義指的是沒有名字的函數(shù)，

匿名函數(shù)僅使用function關鍵字就可以聲明一個函數(shù)。

function(){
            console.log(`這是一個匿名函數(shù)的打印`)   
}

但是由于匿名函數(shù)在創(chuàng)建后無法訪問，并且只能通過賦值給變量來訪問，因此我們將把它存儲在一個我們稱之為 foo 的變量中，這就是我們將在接下來的內容中看到的函數(shù)表達式。

3.函數(shù)表達式

函數(shù)表達式允許我們創(chuàng)建一個沒有任何函數(shù)名的匿名函數(shù)。并且通過聲明一個變量通過賦值來執(zhí)行它。

let foo = function(){
          console.log(`這是一個函數(shù)表達式的打印`) 
}

在上面的代碼中變量foo存儲了一個匿名函數(shù)。因此，匿名函數(shù)是通過調用帶有尾隨括號和分號的變量來調用的。

調用示例：

let foo = function(){
          console.log(`這是一個函數(shù)表達式的打印`) 
}
foo()

箭頭函數(shù)

這種方法是創(chuàng)建 JavaScript 函數(shù)的一種更簡潔的方法。 代碼示例：

()=>console.log(`這是一個箭頭函數(shù)的打印`) 

但是，由于箭頭函數(shù)沒有名稱，如果我們要調用它，它應該存儲在一個變量中，就像函數(shù)表達式一樣。

調用示例：

let foo = ()=>console.log(`這是一個箭頭函數(shù)的打印`) 
foo()

箭頭函數(shù)為定義匿名函數(shù)提供了簡潔的語法。與其他函數(shù)聲明方式相比，箭頭函數(shù)表達式的語法更短。

箭頭函數(shù)也可以接收參數(shù)：

let foo = (arg)=> console.log('這是我們接收的參數(shù)'+arg)
foo()

創(chuàng)建箭頭函數(shù)時，括號()和花括號{}對于單個函數(shù)參數(shù)和單個語句是可以不寫的。

如果函數(shù)要執(zhí)行的指令很多，那么這些指令應該用花括號{}括起來：

let foo =  (number)=>{
        if(number>0){
            console.log('number大于0')
        }else{
            console.log('number小于0')
        }
}

5.構造函數(shù)

聲明函數(shù)的另一種方法是使用帶有 new 關鍵字的 Function 構造函數(shù)。

讓我們先看一下語法：

let sum =new Function("a","b","return a+b");

console.log(sum(5,6))

JavaScript 有一個名為 Function 的內置構造函數(shù)對象，可用于聲明和創(chuàng)建函數(shù)。

此構造函數(shù)可以傳遞任意數(shù)量的參數(shù)。在這個例子，我們向它傳遞了 2 個參數(shù)，即“ a ”和“ b ”。

最后一個參數(shù)是應該傳遞函數(shù)應該執(zhí)行的指令的代碼。也就是我們要執(zhí)行的函數(shù)體。

一般語法是：

letfuncName= new Function("arg1","arg2","arg3","arg4","arg5",......,"函數(shù)體")

所以在上面例子中我們使用 Function 對象創(chuàng)建了一個函數(shù)sum()。

哪種方式最好？

這個問題是沒有答案，因為一切都取決于代碼的編寫需求和功能需求。

所以你可以使用任何你想要的方法或函數(shù)類型，它們都會生成相同的效果。

因此，你可以根據(jù)你的個人喜好，隨意選擇你喜歡的任何一種。但是，我建議盡可能堅持使用箭頭函數(shù)類型，因為它提供更好的性能和可讀性。當時他也是有缺點的就是在我們使用時要注意他的this指向問題。具體的可以看我這篇文章# 你真的知道JavaScript中的this到底指向的是什么嗎？

到此這篇關于JavaScript聲明函數(shù)的5種方法小結的文章就介紹到這了,更多相關JavaScript聲明函數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！