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;   } }

總結

如果你把這些方式中的某幾個結合起來，還會有