首页 >web前端 >js教程 > 正文

JS中定义函数的几种方法

转载2020-10-20 17:21:2201129

你知道在 JavaScript 中创建一个函数有多少种方式吗?下面本篇文章给大家介绍一下在 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;
  }
}

总结

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

相关免费学习推荐:js视频教程

以上就是JS中定义函数的几种方法的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除

  • 相关标签:javascript 前端
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php怎么判断有几位小数461
    php中转换首字母大写的函数是什么382
    Javascript怎么检查对象是否为空900
    推荐视频教程
  • JavaScript高级实践视频教程—布尔教育JavaScript高级实践视频教程—布尔教育
  • JavaScript入门基础视频教程JavaScript入门基础视频教程
  • Javascript趣味课堂Javascript趣味课堂
  • JavaScript基础精讲视频教程JavaScript基础精讲视频教程
  • JavaScript基础入门及设计模式视频教程JavaScript基础入门及设计模式视频教程
  • JavaScript深入视频教程JavaScript深入视频教程
  • 视频教程分类