JavaScript 函数的种类 (6大类型)

函数的重要性

在JavaScript中,函数(Function)是个重要的内容,它在开发中会经常被用到。这几年函数式编程越来越火,如React,在React中,一个组件就是一个函数,React许多Hook也是一个函数。

函数的种类

1.Named Functions (具名函数)

具名函数在JavaScript中最常见的定义函数的方法,他使用function关键字定义,后面跟着函数名、小括号(里面写参数)、大括号(里面是函数体,写函数执行的代码)。

js 复制代码
// 定义
function foo () {
	console.log("foo 函数执行了~")
}
// 使用
foo()

2.Anonymous Functions (匿名函数)

匿名函数,顾名思义就是没有名字的函数,它通常用在函数表达式中,或者作为参数传递给其他函数。

js 复制代码
// 定义
const foo = function (name) {
	console.log(`你好${name}!`)
}
// 使用
foo("张翼德") // 你好张翼德

3.IIFE Functions (立即执行函数)

JavaScript函数一般是使用了在执行函数体,而立即使用函数体 (IIFE) 是在创建后立即定义并执行的函数表达式。用于创建私有作用域并避免污染全局命名空间。

js 复制代码
// 定义 => 自使用(不用显性地使用,自己会使用)
(function () {
	const msg = "我乃常山赵子龙!"
	console.log(msg) // 我乃常山赵子龙!
})()

4.Arrow Functions (箭头函数)

箭头函数在ES6中引入,是一种编写函数表达式的简洁方式。它的语法很短,有时候一行代码足以。

  • 当箭头函数只有一个参数的的时候,小括号可以省略不写。

  • 箭头函数函数体只有一行代码并且有返回值时,大括号和return关键字可以省略不写。

js 复制代码
// 定义1
const sayHello = name => {
	console.log(`你好${name}`)
}
// 使用
sayHello("吕布") // 你好吕布


// 定义2
const sum = (num1, num2) => num1 + num2
// 使用
console.log(sum(1, 1)) // 2

5.Higher Order Function (高阶函数)

将一个或多个函数作为参数或返回一个函数的函数称为高阶函数。如:map()filter()reduce()等。

js 复制代码
const list = ["刘备", "关羽", "张飞"]

function findLiu (name) {
	return name === "刘备"
}
// 将普通函数传进去
const newArr1 = list.filter(findLiu)
console.log(newArr1) // ['刘备']

// 将匿名函数传进入
const newArr2 = list.filter(function (name) {
	return name === "关羽"
})
console.log(newArr2) // ['关羽']

// 将箭头函数传进去
const newArr3 = list.filter(name => name === "张飞")
console.log(newArr3) // ['张飞']

6.Constructor Function (构造函数)

构造函数用于创建具有相似属性和方法的对象。 使用new关键字使用它们来创建对象的实例。
构造函数函数名必须使用大写字母开头,这也是JavaScript区分普通函数和构造函数方法。

js 复制代码
// 定义
function Person(name, age) {
	this.name = name
	this.age = age
}
// 使用
const liubei = new Person("刘备", 24)
const guanyu = new Person("关羽", 25)
const zhangfei = new Person("张飞", 20)

console.log(`${liubei.name}${liubei.age}岁!`) // 刘备24岁!
console.log(`${guanyu.name}${guanyu.age}岁!`) // 关羽25岁!
console.log(`${zhangfei.name}${zhangfei.age}岁!`) //张飞20岁!
相关推荐
轻语呢喃几秒前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想13 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷14 分钟前
TypeScript-webpack
javascript·webpack·typescript
Rockson18 分钟前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志2 小时前
typescript结构化类型应用两例
javascript
gnip3 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘4 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js