作者: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个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。