JavaScript從常規(guī)函數(shù)到箭頭函數(shù)的橋梁

許多剛剛學(xué)習(xí)JavaScript的小伙伴，會(huì)碰到各種各樣的難題，在這些眾多難題中之一的是理解編寫函數(shù)的不同方式，包括箭頭函數(shù)，所以今天，我打算詳細(xì)解釋 JavaScript 中的所有類型的函數(shù)。

那么讓我們開始吧……

為了解釋編寫 JavaSript 函數(shù)的方法，讓我們將它們分為兩種主要類型：函數(shù)聲明和函數(shù)表達(dá)式。

1- 函數(shù)聲明

這是我們所知道的類型，類似于其他編程語言的功能。函數(shù)聲明有兩種類型：     

a．傳統(tǒng)函數(shù)：傳統(tǒng)（常規(guī)）函數(shù)具有以下模式：

function functionName ( optionalParameter/s ){}例如：

function print(){
console.log("hello world");
}

并帶有參數(shù)：

function add(number1,number2){
return number1 + number2
}

b．簡寫函數(shù)

簡寫函數(shù)是一個(gè)常規(guī)函數(shù)，但對(duì)于一個(gè)類..模式的不同之處在于我們不寫函數(shù)關(guān)鍵字，所以它是：
functionName ?(?optionalParameter/s? ?){}??

讓我們?cè)谝粋€(gè)帶有速記函數(shù)的示例中看到它，我們將其稱為 login：

class user:
 constructor(name,email){
   this.userName = name;
   this.userEmail = email;
}
 login(){
 console.log(`Hello ${this.name} you have login successfully`);
}

2- 函數(shù)表達(dá)式

函數(shù)表達(dá)式就像一個(gè)函數(shù)聲明，但我們將它分配給一個(gè)對(duì)象（變量）讓我們討論它的 4 種類型：

a．正則函數(shù)表達(dá)式

讓我們談?wù)勥@意味著什么：

如果我們有這個(gè)函數(shù)：

function print(){
console.log("hello world");
}

然后當(dāng)我們想要調(diào)用它時(shí)，我們輸入：

print()

但是在正則函數(shù)表達(dá)式中，我們會(huì)將函數(shù)保存在變量中“將函數(shù)分配給變量”，例如：

let myPrint = function print(){
console.log("hello world");
}

現(xiàn)在如果我們嘗試調(diào)用 print 會(huì)發(fā)生什么？ 這將導(dǎo)致一個(gè)錯(cuò)誤，告訴我們沒有定義 print 那么我們?nèi)绾尾拍艿竭_(dá)該函數(shù)呢？ 我們可以使用分配給函數(shù)的變量名 (myPrint)。 在我們的例子中，我們直接為變量分配了一個(gè)函數(shù)，這意味著我們的變量來自函數(shù)類型，所以讓我們嘗試調(diào)用它，結(jié)果顯然是有效的。

b. 立即調(diào)用函數(shù)表達(dá)式 (Immediately Invoked Function Expression)

從它的名字來看，IIFE 會(huì)被立即調(diào)用，你可以把它想象成函數(shù)調(diào)用了自己并且會(huì)被執(zhí)行。語法很簡單 .. 我們有一個(gè)函數(shù)：?functionfunctionName(){動(dòng)作，}?

你可以將在括號(hào)或“圓括號(hào)” (functionfunctionName(){動(dòng)作之間包含函數(shù)，})并以這種方式以另一個(gè)括號(hào)結(jié)束函數(shù)：?(functionfunctionName(){動(dòng)作})();?

所以你現(xiàn)在的預(yù)計(jì)是：這個(gè)函數(shù)將在文件執(zhí)行開始時(shí)立即調(diào)用

讓我們寫一個(gè)例子：

(function print(){
console.log("hello world");
})();

讓我們開始： 讓我們執(zhí)行它：

但是等等.. 我們說過我們要將函數(shù)分配給一個(gè)變量！然后讓我們這樣做：

let myPrint = (function print(){
console.log("hello world");
})();

現(xiàn)在會(huì)發(fā)生什么？讓我們使用它：

為什么沒有效果？？？

簡單的答案是因?yàn)?IIFE 調(diào)用了自己 .. 這意味著當(dāng)我們將函數(shù)分配給變量時(shí)，該函數(shù)立即被調(diào)用并且保存的內(nèi)容“分配給”我們的 myPrint 變量是結(jié)果..所以首先我們必須刪除調(diào)用括號(hào)并重試： 所以現(xiàn)在它可以工作并且變量的類型未定義 

讓我們更改函數(shù)以給變量 myPrint 一個(gè)字符串類型：

C. 匿名函數(shù)這是一個(gè)匿名函數(shù)，僅此而已！只是一個(gè)沒有名字的函數(shù) .. 

語法如下：?[var|let|const] variableName = function(){actions}?

讓我們用這個(gè)例子來試試：

注意這里的函數(shù)要賦值給一個(gè)變量，否則會(huì)報(bào)錯(cuò)

額外的例子：讓我們嘗試結(jié)合匿名函數(shù)和 IIFE ：

d. 箭頭函數(shù)

我們終于來了..讓我們分步驟編寫箭頭函數(shù)語法：

首先：讓我們從上面竊取匿名函數(shù)語法?[var|let|const] variableName = function(){actions}?

下一個(gè)：刪除function關(guān)鍵字：?[var|let|const] variableName = (){actions}?

最后：在括號(hào)后添加 (=>) 符號(hào)：?[var|let|const] variableName = ()=>{actions}?

完成了..這是我們的語法，所以讓我們現(xiàn)在試試：我們的例子：

let myPrint = ()=> {
    return "hello world";
    }

我們走吧！

文章到這里，就已經(jīng)結(jié)束了，很感謝大家的觀看。