按照MECE原则(相互独立、完全穷尽),可以从以下多个维度对JavaScript函数进行分析:
一、按定义方式划分
- 函数声明
- 使用
function
关键字定义函数,具有函数名,并且函数声明会被提升到其所在作用域的顶部。例如:
- 使用
function add(a, b) {
return a + b;
}
- 这种定义方式与其他方式在语法结构和提升特性上有明显区别,相互独立。所有通过这种经典`function`关键字且具名的函数定义都归为此类,完全穷尽了函数声明这种定义形式。
- 函数表达式
- 将函数定义赋值给一个变量,分为具名函数表达式和匿名函数表达式。匿名函数表达式如:
var subtract = function (a, b) {
return a - b;
};
- 具名函数表达式则在函数内部可通过函数名递归调用自身,例如:
var factorial = function f(n) {
if (n === 0 || n === 1) {
return 1;
} else {
return n * f(n - 1);
}
};
- 函数表达式与函数声明不同,其变量提升规则遵循变量提升规则而非函数声明提升规则。它涵盖了所有将函数作为值赋给变量的定义方式,做到相互独立且完全穷尽。
- 箭头函数
- 是ES6引入的一种简洁的函数定义方式,语法更加紧凑。例如:
var multiply = (a, b) => a * b;
- 箭头函数没有自己的`this`、`arguments`、`super`和`new.target`绑定,其`this`值继承自外层作用域,这使其与传统函数声明和函数表达式有本质区别,相互独立。并且所有使用箭头语法定义的函数都属于此类,完整覆盖了这种函数定义形式。
二、按函数功能划分
- 数学运算函数
- 用于执行各种数学计算,如加法、减法、乘法、除法、求幂等操作。像自定义的上述
add
、subtract
、multiply
函数,以及JavaScript内置的Math.max()
、Math.min()
、Math.pow()
等函数。它们专注于数学领域的运算,功能明确,与其他功能类型的函数相互独立。在数学运算功能范畴内,包含了所有实现数学计算相关功能的函数,完全穷尽。
- 用于执行各种数学计算,如加法、减法、乘法、除法、求幂等操作。像自定义的上述
- 字符串处理函数
- 对字符串进行操作,比如字符串的拼接、截取、查找、替换等。例如
String.prototype.concat()
、String.prototype.slice()
、String.prototype.indexOf()
、String.prototype.replace()
等。这些函数围绕字符串展开操作,功能特性与数学运算等其他功能函数不同,相互独立。同时,涵盖了所有以字符串为操作对象的函数功能类型。
- 对字符串进行操作,比如字符串的拼接、截取、查找、替换等。例如
- 数组操作函数
- 实现对数组的各种处理,例如数组元素的添加、删除、排序、遍历等。像
Array.prototype.push()
、Array.prototype.pop()
、Array.prototype.sort()
、Array.prototype.forEach()
等函数。数组操作函数专门针对数组数据结构,与处理其他数据类型或执行其他功能的函数区分明显,且完整包含了数组相关操作的各类函数。
- 实现对数组的各种处理,例如数组元素的添加、删除、排序、遍历等。像
- DOM操作函数
- 在浏览器环境中,用于操作文档对象模型(DOM),比如创建元素、添加元素到文档、修改元素属性等。例如
document.createElement()
、element.appendChild()
、element.setAttribute()
等。这类函数依赖浏览器环境,功能聚焦于DOM操作,与其他在非DOM环境或执行其他任务的函数相互独立,且全面覆盖了DOM操作相关的函数功能。
- 在浏览器环境中,用于操作文档对象模型(DOM),比如创建元素、添加元素到文档、修改元素属性等。例如
三、按函数参数和返回值划分
- 无参数无返回值函数
- 函数定义时不接收参数,执行完毕后也不返回任何值。常用于执行一些不需要外部数据参与且不产生结果供外部使用的操作,例如在网页中弹出一个简单提示框的函数:
function showSimpleAlert() {
alert('Hello');
}
- 与有参数或有返回值的函数在参数和返回值特性上截然不同,相互独立。并且所有符合这种无参数无返回值特征的函数都归为此类,完全穷尽了这一类型。
- 有参数无返回值函数
- 函数定义时接收参数,但不返回值。常用于根据传入的不同参数执行特定操作,例如根据传入的颜色参数改变网页背景颜色的函数:
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
- 它与无参数无返回值以及有返回值的函数类型区分清晰,相互独立。同时,涵盖了所有接收参数但不返回值的函数,做到完全穷尽。
- 无参数有返回值函数
- 函数不接收参数,但会返回一个值。例如获取当前日期的函数(简化示例):
function getCurrentDate() {
return new Date();
}
- 这种类型与其他参数和返回值组合的函数类型不同,相互独立。并且包含了所有不依赖外部传入参数却产生返回结果的函数,完整覆盖此类型。
- 有参数有返回值函数
- 函数既接收参数又返回值,这是最常见的函数类型之一。如前面定义的
add
、subtract
、multiply
等数学运算函数,根据传入的不同参数进行计算并返回结果。此类函数与其他三种参数和返回值组合类型相互独立,且全面包含了所有既接收参数又有返回值的函数。
- 函数既接收参数又返回值,这是最常见的函数类型之一。如前面定义的