你知道在 JavaScript 中創建一個函數有多少種方式嗎?下面本篇文章給大家介紹一下在 JavaScript 中定義函數的幾種不同方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
1. 聲明函數
function sum(a, b) { return a + b; }
2. 表達式函數
// 可以命名: (function sum(a, b) { return a + b; }); // 也可匿名 (AVOID): (function(a, b) { return a + b; }); // 也能分配給變量: const sum = function sum(a, b) { return a + b; })
3. 箭頭函數
// 一般形式: (a, b) => { return a + b }; // 單參數,一行返回: name => name.split(' ') // 多參數,一行返回: (a, b) => a + b // 單參數,帶函數體 name => { return name.split(' '); }
4. 生成器函數
function *sum(a, b) { yield a + b; }
5. 異步函數
async function sum(a, b) { return await a + b; }
6. 構造函數(AVOID)
new Function(‘a’, ‘b’, ‘return a + b;’);
7. 導出函數
// 默認導出 export default function(a, b) { return a + b; }; // 命名導出 export function sum(a, b) { return a + b; };
8. 對象屬性函數
// 一般形式: const object = { sum: function(a, b) { return a + b; }, }; // 簡寫: const object = { sum(a, b) { return a + b; }, };
9. 對象動態屬性函數
const functionName = "sum"; const object = { [functionName]: function(a, b) { return a + b; }, };
10. 對象屬性的 Getter/Setter 函數
// 一般形式: const object = { get answer { return 42; }, set answer(value) { /* 一些操作value的代碼 */ }, }; // ?使用 defineProperty const obj = {}; Object.defineProperty(obj, "answer", { get() { return 42; }, set(value) { /* 一些操作value的代碼 */ }, });
11. 對象動態屬性的 Getter/Setter 函數
const functionName = "answer"; const object = { get [functionName]() { return 42; }, set [functionName](value) { /* 一些操作value的代碼 */ }, };
12. 類方法函數
class Compute { // 一般形式: sum(a, b) { return a + b; } } class Compute { // 靜態: static sum(a, b) { return a + b; }; }
13. 類屬性函數
class Compute { // 一般形式: sum = function (a, b) { return a + b; }; }class Compute { // 靜態: static sum = function(a, b) { return a + b; }; }
14. 類私有函數
class Compute { // 一般形式: #sum(a, b) { return a + b; } // 靜態: static #sum(a, b) { return a + b; } }
總結
如果你把這些方式中的某幾個結合起來,還會有