关于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个计划及实现

• 更多文章…