函數：聲明 vs. 表達式(Functions: Declarations vs. Expressions) | Javascript
JavaScript 中，定義函數的兩種主要方式是通過聲明式(Declarations)和表達式(Expressions)。沒有了解聲明式和表達式的不同，很多開發者會因為提升(hoisting)的問題，而在錯誤的地方調用函數。
See the Pen 函數：聲明 vs. 表達式(Functions: Declarations vs. Expressions)-Javascript by lenrich (@lenrich) on CodePen.
函數聲明(Functions Declarations):
函數聲明使用function關鍵字定義一個具有名稱的函數。它們會被提升(hoisting)，這意味著它們可以在代碼中定義之前調用。
"use strict";
greet('Jack'); // 在函數聲明之前就可以運行
function greet(name) {
console.log(`你好，${name}！`);
}
函數表達式(Functions Expressions):
另一方面，函數表達式涉及將函數分配給一個變量。 它們不被提升(hoisting)，它們的執行取決於它們在代碼中的位置。
"use strict";
const greet = function (name) {
console.log(`你好，${name}！`);
};
greet('Jane'); // 必須在函數表達式之後調用
區別和用例:
- 提升: 函數聲明被提升，允許在聲明之前調用它們。函數表達式不被提升，需要在使用之前定義。
- 匿名 vs. 有名: 函數表達式可以是匿名的或有名的，提供了設計的靈活性。
- 賦值: 函數聲明是獨立的，而函數表達式涉及分配給變量。
示例代碼:
"use strict";
// 函數聲明
function calculateRectangleArea(length, width) {
return length * width;
}
// 函數表達式
const calculateTriangleArea = function (base, height) {
return 0.5 * base * height;
};
結論:
但其實在開發上，聲明式或表達式對效能沒有太大的影響，可以端看個人喜好選擇其中一個。
Tags