JS中定義函數的幾種方法

你知道在 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;
  }
}

總結

如果你把這些方式中的某幾個結合起來，還會有更多的可能性。 你知道還有哪些方法嗎，請留言告訴我。

相關免費學習推薦：

以上就是JS中定義函數的幾種方法的詳細內容，更多請關注TW511.COM其它相關文章！