淺談JavaScript中的特殊函數
theme: fancy highlight: atom-one-light
持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第28天,點擊查看活動詳情
Hi~,我是一碗周,如果寫的文章有幸可以得到你的青睞,萬分有幸~
🍑 寫在前面
JavaScript中的函數本質上是一個對象,我們可以將這個對象賦值給一個變量,這就使JavaScript中的函數變得非常的靈活,現在就來淺看一下JavaScript中函數的一些用法。
🍒 匿名函數
JavaScript 可以將函數作為數據使用。作為函數本體,它與普通的數據一樣,不一定有名字。沒有名字的函數被稱之為匿名函數。
示例代碼如下:
javascript
//匿名函數
function(){ //匿名函數,會報錯
return '一碗周';
}
但是在 JavaScript 並不支持匿名函數的語法,不過匿名函數有兩個應用,如下所示:
-
回調函數:將一個函數作為另一個函數的參數使用,作為參數的函數
-
自調函數:函數調用自身(定義即調用的函數)
🍓 回調函數
然函數與任何可以被賦值給變量的數據是相同的,那麼它當然可以像其他數據那樣被定義、刪除、拷貝,以及當成參數傳遞給其他函數。
當一個函數作為參數傳遞給另一個函數時,作為參數的函數被稱之為回調函數。作為使用回調函數的函數稱為目標函數(外層函數)
示例代碼如下所示
```javascript // 定義一個函數,這個函數有兩個函數類型的參數,然後分別執行那兩個函數,並返回它們的和。 function sum(a, b) { // -> 目標函數 return a() + b() }
function one() { // -> 回調函數 return 1; }
function two() { // -> 回調函數 return 2; }
console.log(sum(one, two)); // 3 ```
執行流程如下:
當執行 sum
函數時,傳入兩個實參,在 sum
函數中,會將兩個實參作為函數執行,並將返回值計算並返回。
匿名回調函數
所謂匿名回調函數,就是目標函數中的參數是沒有名稱的函數,將上一段代碼修改為使用匿名回調函數
```javascript // 定義一個函數,這個函數有兩個函數類型的參數,然後分別執行那兩個函數,並返回它們的和。 function sum(a, b) { // -> 目標函數 return a() + b() }
console.log(sum( function () { // -> 匿名回調函數 return 1 }, function () { // -> 匿名回調函數 return 2 })); // 3 ```
帶參數的回調函數
javascript
function multiplyByTwo(a, b, c, callbakc) {
var i, ar = []
for (i = 0; i < 3; i++) {
// 通過 arguments 對象將傳入的參數 * 2,然後傳入回調函數進行操作
ar[i] = callbakc(arguments[i] * 2);
}
return ar;
}
console.log(multiplyByTwo(1, 2, 3,
function (a) { // 匿名回調函數
return a + 2
}));
回調函數的優點:
-
匿名回調函數節省了全局命名空間
-
將私有的數據內容開放給指定位置使用
-
保證封裝性 - 雖然可以使用私有數據,但是並不知道來源
-
有助於提升性能
但是回調函數也是有缺點的,當目標函數的參數是一個回調函數時,回調函數的參數又是另一個回調函數,另一個回調函數的參數還是一個回調函數…也就是套娃,也就形成了回調陷阱或稱回調地獄。
🫐 自調函數
目前我們已經討論了匿名函數在回調方面的應用。接下來我們討論另外一種情況,即自調函數,這種函數可以在定義後立即調用。示例代碼如下所示
javascript
(
function () {
console.log("自調函數");
}
)()
這種語法看上去有點唬人,其實沒有什麼,我們只需將匿名函數的定義放進一對括號中,然後外面再緊跟一對括號即可。
語法結構如下圖所示
值得注意的是,自調函數可以命名,但是還是會自調用,如果用函數名調用的話會拋出異常。
自調函數除了以上兩種方式外,還有以下幾種不常用的方式
```javascript + function (v) { // 形參 var w = 100; // 局部變量 console.log("自調函數" + v); }(1);// 實參
! function (v) { var w = 100; // 局部變量 console.log("自調函數" + v); }(2);
~ function (v) { var w = 100; // 局部變量 console.log("自調函數" + v); }(3); ```
使用即時自調匿名函數的好處是不會產生任何全局變量。
缺點在於這樣的函數是無法重複執行的(除非將它放在某個循環或其他函數中)。這也使得即時函數非常適合於執行一些一次性的或初始化的任務。
🍊 作為值的函數
將一個函數作為另一個函數的結果並返回,作為結果返回的函數稱之為作為值的函數。
示例代碼如下:
javascript
function outer() {
var v = 100;
// 在函數的函數體中定義另一個函數 -> 內部(私有)函數
return function () { // 使用匿名函數
return v * 2
}
}
var result = outer();
console.log(result); // [Function]
// 或者下面這種方式與上面那種方式相同
function outer1() {
var v = 100;
// 在函數的函數體中定義另一個函數 -> 內部(私有)函數
function inner() {
return v * 2
}
return inner
}
var result1 = outer1();
console.log(result1); // [Function: inner]
這樣做的好處是:
-
有助於我們確保全局名字空間的純淨性(這意味着命名衝突的機會很小)。
-
確保私有性 — 這使我們可以選擇只將一些必要的函數暴露給“外部世界”,而保留屬於自己的函數,使它們不為該應用程序的其他部分所用。
🍉 寫在最後
本篇文章中介紹了一些函數的特殊用法,也可以説是一些基礎用法吧,內容很簡單🤓🤓🤓🤓
- 用ChatGPT學Nginx是一種什麼體驗
- 【好物分享】分享給前端開發的28個資源(網站、軟件、插件),簡直是提高效率必備
- Vite3.0都來了,你還捲動嗎?(Vite3.0新特性一覽)
- 【好物分享】在命令行讀Markdown,這個感覺太舒服了
- 從0開始使用pnpm構建一個Monorepo方式管理的demo
- 我畫了5張腦圖可以讓你快速入門TypeScript
- 我看着MDN文檔,手寫了幾個數組實例方法
- 淺談JavaScript中的特殊函數
- 如何通過SSH配合VSCode收穫超舒適的遠程開發體驗
- CSS的calc函數不會還有人沒有用吧
- 【戲玩算法】12-圖
- 誰説前端不能搞紅黑樹,用這55張圖拿JS一起手撕紅黑樹
- 簡單總結了10個JavaScript代碼優化小tips
- NaiveUI中看起來沒啥用的組件(文字漸變)實現原來這麼簡單
- 面試官讓我用Flex寫色子佈局,我直接給寫了6個
- Vue3 TS Vite NaiveUI搭建一個項目骨架
- 用一萬多字從頭到尾介紹【函數式編程】
- 這8張腦圖幾乎概括了所有的佈局方案,確定不看看嗎?
- 【戲玩算法】07-字典
- 還在console.log一把梭嗎?console還有其他騷操作