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

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

那么讓我們開始吧……

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

1- 函數聲明

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

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

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

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

并帶有參數：

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

b．簡寫函數

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

讓我們在一個帶有速記函數的示例中看到它，我們將其稱為 login：

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

2- 函數表達式

函數表達式就像一個函數聲明，但我們將它分配給一個對象（變量）讓我們討論它的 4 種類型：

a．正則函數表達式

讓我們談談這意味著什么：

如果我們有這個函數：

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

然后當我們想要調用它時，我們輸入：

print()

但是在正則函數表達式中，我們會將函數保存在變量中“將函數分配給變量”，例如：

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

現在如果我們嘗試調用 print 會發(fā)生什么？ 這將導致一個錯誤，告訴我們沒有定義 print 那么我們如何才能到達該函數呢？ 我們可以使用分配給函數的變量名 (myPrint)。 在我們的例子中，我們直接為變量分配了一個函數，這意味著我們的變量來自函數類型，所以讓我們嘗試調用它，結果顯然是有效的。

b. 立即調用函數表達式 (Immediately Invoked Function Expression)

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

你可以將在括號或“圓括號” (functionfunctionName(){動作之間包含函數，})并以這種方式以另一個括號結束函數：?(functionfunctionName(){動作})();?

所以你現在的預計是：這個函數將在文件執(zhí)行開始時立即調用

讓我們寫一個例子：

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

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

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

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

現在會發(fā)生什么？讓我們使用它：

為什么沒有效果？？？

簡單的答案是因為 IIFE 調用了自己 .. 這意味著當我們將函數分配給變量時，該函數立即被調用并且保存的內容“分配給”我們的 myPrint 變量是結果..所以首先我們必須刪除調用括號并重試： 所以現在它可以工作并且變量的類型未定義 

讓我們更改函數以給變量 myPrint 一個字符串類型：

C. 匿名函數這是一個匿名函數，僅此而已！只是一個沒有名字的函數 .. 

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

讓我們用這個例子來試試：

注意這里的函數要賦值給一個變量，否則會報錯

額外的例子：讓我們嘗試結合匿名函數和 IIFE ：

d. 箭頭函數

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

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

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

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

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

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

我們走吧！

文章到這里，就已經結束了，很感謝大家的觀看。