关于javascript:在-JavaScript-中定义函数的不同方法

作者：Samer Buna

翻译：疯狂的技术宅

原文：https://medium.com/edge-coder…

未经容许严禁转载

你晓得在 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;}
}

总结

如果你把这些形式中的某几个联合起来，还会有更多的可能性。 你晓得还有哪些办法吗，请留言通知我。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …