在 JavaScript 中定义函数的14种方法

声明函数
```
function sum(a, b) { return a + b; } 
```

表达式函数


// 可以命名:
(function sum(a, b) { return a + b; });

// 也可匿名 (AVOID): (function(a, b) { return a + b; });

// 也能分配给变量： const sum = function sum(a, b) { return a + b; })

3. 箭头函数
``` js
// 一般形式:
(a, b) => { return a + b };

// 单参数，一行返回：
name => name.split(' ')

// 多参数，一行返回：
(a, b) => a + b

// 单参数，带函数体
name => { return name.split(' '); }

生成器函数
```
function *sum(a, b) { yield a + b; }
```

异步函数

async function sum(a, b) { return await a + b; }

构造函数（AVOID）

new Function(‘a’, ‘b’, ‘return a + b;’);

导出函数


// 默认导出
export default function(a, b) { return a + b; };

// 命名导出 export function sum(a, b) { return a + b; };

8. 对象属性函数
``` js
// 一般形式:
const object = {
  sum: function(a, b) { return a + b; },
};

// 简写:
const object = {
  sum(a, b) { return a + b; },
};

对象动态属性函数

const functionName = "sum";
const object = {
[functionName]: function(a, b) { return a + b; },
};

对象属性的 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 函数
``` js
const functionName = "answer";
const object = {
  get [functionName]() { return 42; },
  set [functionName](value) { /* 一些操作value的代码 */ },
};

类方法函数


class Compute {
// 一般形式:
sum(a, b) { return a + b; }
}

class Compute { // 静态: static sum(a, b) { return a + b; }; }

13. 类属性函数
``` js
class Compute {
  // 一般形式:
  sum = function (a, b) { return a + b; };
}class Compute {
  // 静态:
  static sum = function(a, b) { return a + b; };
}

类私有函数

class Compute {
// 一般形式:
#sum(a, b) {
return a + b;
}  // 静态:
static #sum(a, b) {
return a + b;
}
}

选自 https://mp.weixin.qq.com/s/qGvaesdpfaI3gr6cp2vNHg

Sogrey / Web-QA

在 JavaScript 中定义函数的14种方法 #297