疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

在 JavaScript 中定义函数的几种不同方法

时间: 2020-09-16 分类: 前端技术   字数: 630 字 阅读: 2分钟
标签: #JavaScript# #函数#
  • 本文译自:https://medium.com/edge-coders/the-different-ways-to-define-a-function-in-javasrcipt-e07c4698a967
  • 译者:疯狂的技术宅

你知道在 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;
  }
}

总结

如果你把这些方式中的某几个结合起来,还会有更多的可能性。 你知道还有哪些方法吗,请留言告诉我。

标签: #JavaScript# #函数#

标题:在 JavaScript 中定义函数的几种不同方法

链接:https://fe-tech.viewnode.com/post/202009/16/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

怎样设计一个 JavaScript 插件系统
关于JavaScript计时器:你需要知道的一切
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
  • 1. 声明函数
  • 2. 表达式函数
  • 3. 箭头函数
  • 4. 生成器函数
  • 5. 异步函数
  • 6. 构造函数(AVOID)
  • 7. 导出函数
  • 8. 对象属性函数
  • 9. 对象动态属性函数
  • 10. 对象属性的 Getter/Setter 函数
  • 11. 对象动态属性的 Getter/Setter 函数
  • 12. 类方法函数
  • 13. 类属性函数
  • 14. 类私有函数
  • 总结
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%