App下載

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

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

許多剛剛學(xué)習(xí)JavaScript的小伙伴,會碰到各種各樣的難題,在這些眾多難題中之一的是理解編寫函數(shù)的不同方式,包括箭頭函數(shù),所以今天,我打算詳細解釋 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");
}

然后當我們想要調(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é)果顯然是有效的。

函數(shù)表達式參考錯誤函數(shù)表達式結(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í)行它:

國際金融研究所立即調(diào)用函數(shù)表達式

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

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

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

國際金融研究所為什么沒有效果???

簡單的答案是因為 IIFE 調(diào)用了自己 .. 這意味著當我們將函數(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ù)

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

匿名函數(shù)

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

匿名函數(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";
    }

我們走吧!

箭頭函數(shù)

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


0 人點贊