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

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

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

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

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

1.Function聲明

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

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

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

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

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

foo()

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

假如我們希望在使用foo函數(shù)時(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關(guān)鍵字就可以聲明一個(gè)函數(shù)。

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

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

3.函數(shù)表達(dá)式

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

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

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

調(diào)用示例：

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

箭頭函數(shù)

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

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

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

調(diào)用示例：

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

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

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

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

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

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

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

5.構(gòu)造函數(shù)

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

讓我們先看一下語法：

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

console.log(sum(5,6))

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

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

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

一般語法是：

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

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

哪種方式最好？

這個(gè)問題是沒有答案，因?yàn)橐磺卸既Q于代碼的編寫需求和功能需求。

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

因此，你可以根據(jù)你的個(gè)人喜好，隨意選擇你喜歡的任何一種。但是，我建議盡可能堅(jiān)持使用箭頭函數(shù)類型，因?yàn)樗峁└玫男阅芎涂勺x性。當(dāng)時(shí)他也是有缺點(diǎn)的就是在我們使用時(shí)要注意他的this指向問題。具體的可以看我這篇文章# 你真的知道JavaScript中的this到底指向的是什么嗎？

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

最新評論