JavaScript是一门多范式的编程语言，其中函数是其核心特性之一。函数在JavaScript中起到至关重要的作用，不仅可以实现模块化的代码结构，还可以用于处理数据、控制流程、创建对象，以及执行各种任务。本文将深入探讨JavaScript函数的各个方面，包括函数的定义、参数传递、作用域、闭包、回调函数等，以帮助您更好地理解和利用JavaScript中的函数。
函数的基本定义和调用
函数是一段可重复使用的代码块，用于执行特定的任务。在JavaScript中，函数是一种对象，可以通过多种方式来定义和调用。
1. 函数的声明
函数可以通过function关键字进行声明，后接函数名、参数列表和函数体。函数名是标识函数的唯一名称，参数列表包含函数接受的参数，函数体包含实际的执行代码。
function greet(name) { console.log("Hello, " + name + "!"); }
要调用函数，只需使用函数名和必要的参数调用它：
greet("Alice"); // 输出 "Hello, Alice!"
2. 函数表达式
除了声明函数，还可以使用函数表达式来创建匿名函数。函数表达式将函数赋值给变量，然后可以通过变量名调用函数。
javascriptCopy code const greet = function(name) { console.log("Hello, " + name + "!"); };
函数表达式调用方式与函数声明相同：
greet("Bob"); // 输出 "Hello, Bob!"
3. 箭头函数
ES6引入了箭头函数，它是一种更简洁的函数表达式。箭头函数适用于单个表达式的函数，无需显式return关键字。
const greet = (name) => { console.log("Hello, " + name + "!"); };
箭头函数的调用方式与函数表达式相同。
4. 自执行函数
自执行函数是在定义后立即执行的函数，通常用于创建私有作用域，以避免变量污染全局作用域。
(function() { let privateVar = "I'm private"; console.log(privateVar); })(); // 输出 "I'm private"
自执行函数将自己包裹在括号内，然后立即调用。
函数参数传递
函数可以接受参数，这使得它们可以处理不同的输入数据。在JavaScript中，参数传递有两种方式：按值传递和引用传递。
1. 按值传递
JavaScript中的基本数据类型（如数字、字符串、布尔等）以值的方式传递给函数。这意味着函数接受的参数是原始值的副本，而不是原始值本身。
function modifyValue(value) { value = value + 10; console.log(value); } let num = 5; modifyValue(num); // 输出 15 console.log(num); // 输出 5，原始值未改变
2. 引用传递
JavaScript中的对象和数组等复杂数据类型以引用的方式传递给函数。这意味着函数接受的参数是指向原始对象的引用，因此函数可以修改原始对象。
function modifyArray(arr) { arr.push(4); console.log(arr); } let numbers = [1, 2, 3]; modifyArray(numbers); // 输出 [1, 2, 3, 4] console.log(numbers); // 输出 [1, 2, 3, 4]，原始对象已更改
3. 默认参数
ES6引入了默认参数，允许您为函数参数指定默认值。如果调用函数时未提供某个参数的值，将使用默认值。
function greet(name = "Guest") { console.log("Hello, " + name + "!"); } greet(); // 输出 "Hello, Guest!" greet("Alice"); // 输出 "Hello, Alice!"
作用域和闭包
JavaScript中的函数作用域和闭包是理解函数行为的关键概念。作用域定义了变量的可见性，而闭包允许函数访问其外部作用域的变量。
1. 作用域
JavaScript中有两种作用域：全局作用域和局部作用域。全局作用域包含全局变量，而局部作用域包含在函数内部声明的变量。
let globalVar = "I'm global"; // 全局作用域 function exampleFunction() { let localVar = "I'm local"; // 局部作用域 console.log(globalVar); // 可访问全局变量 console.log(localVar); // 可访问局部变量 }
2. 闭包
闭包是指一个函数可以访问其定义外部作用域的变量，即使在该外部作用域已经结束执行。这使得函数能够“记住”在其创建时可访问的变量。
function outer() { let outerVar = "I'm outer"; function inner() { console.log(outerVar); // 可访问外部函数的变量 } return inner; } const innerFunction = outer(); innerFunction(); // 输出 "I'm outer"
上述示例中，inner函数可以访问outer函数中的outerVar变量，因为它是一个闭包。
回调函数
回调函数是JavaScript中的一种常见模式，用于处理异步操作、事件处理和数据获取。回调函数是函数的一种形式，可以作为参数传递给其他函数，以在特定事件发生时执行。
1. 基本回调
回调函数通常用于异步操作，如定时器或网络请求。以下是一个使用回调函数的示例：
function fetchData(callback) { setTimeout(function() { const data = "Data received"; callback(data); }, 1000); } function processReceivedData(data) { console.log("Processing: " + data); } fetchData(processReceivedData);
在这个示例中，fetchData函数使用回调函数processReceivedData来处理从异步操作中获取的数据。
2. 匿名回调
回调函数通常可以作为匿名函数传递，以减少不必要的函数声明。以下是一个使用匿名回调函数的示例：
function fetchData(callback) { setTimeout(function() { const data = "Data received"; callback(data); }, 1000); } fetchData(function(data) { console.log("Processing: " + data); });
匿名回调函数紧凑且直接，适用于简单的回调操作。
3. 错误回调
在异步操作中，错误回调通常用于处理错误情况。这样可以将错误处理与正常操作分离开来。
function fetchData(callback, errorCallback) { const random = Math.random(); if (random < 0.5) { const data = "Data received"; callback(data); } else { const error = "Error occurred"; errorCallback(error); } } function processReceivedData(data) { console.log("Processing: " + data); } function handleFetchError(error) { console.error("Error: " + error); } fetchData(processReceivedData, handleFetchError);
在上面的示例中，handleFetchError函数用于处理错误情况。
函数的返回值
函数可以返回值，这使得它们可以产生结果或数据。在JavaScript中，函数可以返回任何类型的值，包括其他函数。
1. 返回值
要从函数中返回值，可以使用return语句，后跟要返回的值。如果函数没有return语句，将返回undefined。
function add(a, b) { return a + b; } const result = add(3, 4); console.log(result); // 输出 7
2. 返回函数
JavaScript中的函数也可以返回其他函数，这是函数式编程的一个关键概念。这种函数被称为高阶函数。
function createMultiplier(factor) { return function(number) { return number * factor; }; } const double = createMultiplier(2); const triple = createMultiplier(3); console.log(double(5)); // 输出 10 console.log(triple(5)); // 输出 15
上述示例中，createMultiplier函数返回了一个新的函数，根据传递的factor参数来执行不同的乘法操作。
递归
递归是一种在函数内部调用自身的编程技巧。递归通常用于解决可以分解为相同问题的重复性任务，如计算阶乘、斐波那契数列等。
1. 基本递归
下面是一个计算阶乘的递归函数的示例：
function factorial(n) { if (n === 0) { return 1; } else { return n * factorial(n - 1); } } console.log(factorial(5)); // 输出 120
递归函数在每次调用中减小问题的规模，直到达到基本情况（此处是n === 0），然后开始回溯。
2. 尾递归
尾递归是一种特殊的递归，其中递归调用是函数的最后一个操作。尾递归可以优化，以减少内存消耗。
function factorial(n, result = 1) { if (n === 0) { return result; } else { return factorial(n - 1, n * result); } } console.log(factorial(5)); // 输出 120
尾递归函数将中间结果传递给下一个递归调用，而不是创建新的函数调用栈。
高阶函数
高阶函数是接受一个或多个函数作为参数，并/或返回一个函数的函数。高阶函数是函数式编程的关键元素，它可以让您更灵活地处理函数和数据。
1. 接受函数作为参数
高阶函数可以接受其他函数作为参数，以实现不同的操作。以下是一个接受回调函数的高阶函数示例：
function operateOnNumbers(a, b, operation) { return operation(a, b); } function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } console.log(operateOnNumbers(5, 3, add)); // 输出 8 console.log(operateOnNumbers(5, 3, subtract)); // 输出 2
operateOnNumbers函数接受两个数字和一个操作函数作为参数，然后使用操作函数来执行不同的操作。
2. 返回函数
高阶函数还可以返回一个函数，以实现柯里化（currying）或延迟执行等功能。
function multiply(factor) { return function(number) { return number * factor; }; } const double = multiply(2); console.log(double(5)); // 输出 10
multiply函数返回一个新的函数，根据传递的factor参数执行乘法操作。
深入探讨JavaScript函数（二）https://developer.aliyun.com/article/1430136
![[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635463/20241109/c55917b4a28342b78633c9da58d86e30.png?x-oss-process=image/resize,h_160,m_lfit)