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

資深網(wǎng)絡(luò)表情包傳播者 2021-08-25 14:05:53 瀏覽數(shù) (2209)

反饋

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

那么讓我們開始吧……

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

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ù)是一個常規(guī)函數(shù)，但對于一個類..模式的不同之處在于我們不寫函數(shù)關(guān)鍵字，所以它是：
functionName ?(?optionalParameter/s? ?){}??

讓我們在一個帶有速記函數(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ù)表達式

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

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

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

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

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

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

print()

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

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

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

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

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

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

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

讓我們寫一個例子：

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

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

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

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

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

為什么沒有效果？？？

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

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

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

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

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

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

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

d. 箭頭函數(shù)

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

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

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

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

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

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

我們走吧！

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

JavaScript

0 人點贊