热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JS中定义函数的几种方法

你知道在JavaScript中创建一个函数有多少种方式吗?下面本篇文章给大家介绍一下在JavaScript中定义函数的几种不同方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

你知道在 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社区 其它相关文章!


推荐阅读
  • 本文详细解析了汉字‘悲’在新华字典中的发音、笔画结构、常见词汇搭配及其在人名中的应用。 ... [详细]
  • Node.js 断点调试指南
    本文详细介绍了利用Google Chrome DevTools和Visual Studio Code两种工具进行Node.js应用的断点调试技巧。 ... [详细]
  • 在日常运维中,频繁地对多台Linux服务器进行用户管理是一项耗时的任务。为了提高效率,可以通过编写Expect脚本来实现远程自动化操作,从而简化这一过程。 ... [详细]
  • Redis: 高效的键值存储系统
    Redis是一款遵循BSD许可的开源高性能键值存储系统,它不仅支持多种数据类型的存储,还提供了数据持久化和复制等功能,显著区别于其他键值缓存解决方案。 ... [详细]
  • 本文详细介绍了Golang中string类型的内部结构及其特性,包括字符串的定义、表示方式、数据结构以及相关的操作方法,如字符串拼接和类型转换等。 ... [详细]
  • 本文将详细探讨MySQL中较为特殊的三种数据类型:SQLTEXT、DATE以及SET,包括它们的基本用法、适用场景及一些高级特性。 ... [详细]
  • 随着自媒体行业的快速发展,市场竞争日益激烈。为了应对这一挑战,许多自媒体人转向了内容电商,试图通过直播和视频带货来增加收入。然而,这种新模式在带来机遇的同时,也伴随着一系列问题。 ... [详细]
  • 第1章选择流程控制语句1.1顺序结构的基本使用1.1.1顺序结构概述是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行 ... [详细]
  • 在几何学中,特定的角度如30°、45°、60°等因其独特的性质而被频繁应用在问题解决中。这些特殊角不仅帮助学生快速识别图形特征,还能简化复杂的计算过程。本文将深入探讨如何利用这些特殊角,特别是通过‘12345模型’来解决实际问题。 ... [详细]
  • 华为云openEuler环境下的Web应用部署实践
    本文详细记录了在华为云openEuler系统上进行Web应用部署的具体步骤,包括配置yum源、安装Apache、MariaDB、PHP及其相关组件,并完成WordPress的安装与配置过程。 ... [详细]
  • 现在的新手程序猿,动不动就是框架,就连外面培训的也是框架,我就问一句,没了框架是不是就啥也不会了 ... [详细]
  • 本文介绍了一个基本的同步Socket程序,演示了如何实现客户端与服务器之间的简单消息传递。此外,文章还概述了Socket的基本工作流程,并计划在未来探讨同步与异步Socket的区别。 ... [详细]
  • 近期有不少用户反馈无法登录 Telegram,本文将探讨可能的原因及解决方案。 ... [详细]
  • RabbitMQ 核心组件解析
    本文详细介绍了RabbitMQ的核心概念,包括其基本原理、应用场景及关键组件,如消息、生产者、消费者、信道、交换机、路由键和虚拟主机等。 ... [详细]
  • 本文深入探讨了领域驱动设计(DDD)中的聚合概念及其在事件溯源架构中的应用。聚合是一组紧密相关的类,这些类作为一个整体运作,形成一个有明确边界的组织。只有通过聚合根才能与聚合内的对象进行交互。 ... [详细]
author-avatar
mobiledu2502852625
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有