許多剛剛學習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";
}
我們走吧!
文章到這里,就已經結束了,很感謝大家的觀看。