一、函数的基本概念与分类
本节聚焦于JavaScript中的“函数”这一基本构建块，以及它们在前端开发中的主要分类与使用场景。前端开发必看：JavaScript 函数的使用方法全解（教程）将帮助你快速区分不同类型的函数及其适用场景，提升代码可读性与维护性。
在实际开发中，理解函数声明与函数表达式的区别，是掌握作用域、提升与调用时机的前提。通过对比，你可以清楚知道何时会发生变量提升、何时需要将函数赋值给变量，进而更灵活地组织代码结构。
// 函数声明
function sum(a, b) {return a + b;
}// 函数表达式
const sumExpr = function(a, b) {return a + b;
}
此外，箭头函数在简洁表达、上下文绑定方面具有显著优势，但在某些场景下如this指向、new关键字等需要注意约束。理解箭头函数的短法则有助于快速写出无缝集成的代码。
下面的示例展示了不同形式函数的基本用法，帮助你迅速体会它们的区别与联系。
// 箭头函数
const add = (x, y) => x + y;// 普通函数声明与调用
function multiply(a, b) {return a * b;
}
console.log(multiply(2, 3)); // 6
在实践中，自执行函数（IIFE）常用来创建私有作用域，避免全局污染，并在初始化阶段执行一次。闭包则是JavaScript函数式编程的核心能力之一，能让私有变量长期存在于外部作用域之外。
// 自执行函数（IIFE）
(function() {var secret = "hidden";console.log("IIFE 立刻执行");
})();// 闭包示例
function makeCounter() {let count = 0;return function() {count += 1;return count;};
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
二、参数处理与调用方式
默认参数、参数解构与剩余参数
默认参数让函数在参数未传或为undefined时具有默认值，参数解构能让传入对象的属性变得更直观，剩余参数则方便聚合可变数量的参数。结合解构赋值，可以编写简洁且可维护的接口。
为确保函数更具鲁棒性，我们常用参数校验与类型断言，并在必要时抛出错误，以便上层调用者及时处理。
function greet({ name = "Guest", age = 18 } = {}) {return `Hello ${name}, age ${age}`;
}
console.log(greet({ name: "Alex" })); // Hello Alex, age 18function sumAll(...nums) {return nums.reduce((acc, n) => acc + n, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10
this 的指向与绑定（bind/call/apply）
在非箭头函数中，this的指向取决于调用方式。通过call、apply或bind，可以显式地绑定上下文，从而实现方法复用与事件处理的灵活性。
下面的代码演示了三种绑定方式在上下文传递时的差异，以及如何在回调中保持期望的上下文。
const obj = {label: "item",show() { console.log(this.label); }
};const fn = obj.show;
fn(); // 无绑定，通常为 undefinedfn.call(obj); // 输出 "item"
fn.apply(obj); // 输出 "item"const bound = fn.bind(obj);
bound(); // 输出 "item"
三、函数式编程在前端的应用
高阶函数、纯函数与副作用
高阶函数是接收函数作为参数或返回函数的函数，是实现代码解耦、流程组合的重要工具。纯函数则在同一输入总能得到同一输出，且无副作用，这样的特性有助于实现可预测的UI渲染和测试友好性。
在前端开发中，我们通常通过组合、映射、过滤等函数式操作来处理数据流，同时关注最小化副作用，以提高应用的稳定性与可维护性。
function map(arr, fn) {const result = [];for (let i = 0; i < arr.length; i++) {result.push(fn(arr[i], i, arr));}return result;
}const nums = [1, 2, 3];
const doubled = map(nums, n => n * 2);
console.log(doubled); // [2, 4, 6]
柯里化与组合
柯里化将多参数函数逐步转化为一系列单参数函数，便于函数复用和创建高度可配置的工具。与之配套的函数组合能够将小的功能单元拼装成更强大的行为。
下面的示例展示了一个简单的柯里化实现，以及如何通过组合来构建复杂逻辑。
// 简单柯里化
function curryAdd(a) {return function(b) {return a + b;};
}
const add5 = curryAdd(5);
console.log(add5(3)); // 8// 简单组合
function compose(f, g) {return function(x) {return f(g(x));};
}
const toString = x => String(x);
const double = x => x * 2;
const toStringDouble = compose(toString, double);
console.log(toStringDouble(4)); // "8"
四、异步函数与错误处理
async/await 基本用法
异步编程是现代前端的核心，async/await让异步代码看起来像同步代码，提升可读性。掌握异常捕获与并发控制，是编写健壮异步逻辑的关键。
通过Promise的底层机制，我们可以顺序执行、并发执行或受限并发，从而实现高效的数据获取与渲染。
async function fetchUser(id) {const res = await fetch(`https://api.example.com/user/${id}`);if (!res.ok) throw new Error("Network response was not ok");const data = await res.json();return data;
}
错误处理与并发控制
在异步逻辑中，错误处理至关重要。使用try/catch可以捕捉异步求值中的异常，并通过错误传播实现统一处理。对于并发，你可以使用Promise.all、Promise.race等组合。
async function loadAll(urls) {try {const results = await Promise.all(urls.map(u => fetch(u).then(r => r.json())));return results;} catch (err) {console.error("加载失败:", err);throw err;}
}
五、性能优化与调试技巧
函数调用的性能要点
在前端性能优化中，函数调用的开销可能来自于重复计算、过度绑定或不必要的渲染。通过缓存结果（记忆化）、按需执行和避免在渲染期间创建新函数，可以显著提升性能。
对于高频触发的事件处理，节流与防抖策略是常用的优化手段，有效降低浏览器重排与重绘的成本。
// 简单记忆化示例
function memoize(fn) {const cache = {};return function(arg) {if (cache[arg] !== undefined) return cache[arg];const result = fn(arg);cache[arg] = result;return result;};
}
调试函数调用与内存管理
调试技巧包括使用console.debug、断点调试以及性能分析工具（如浏览器开发者工具的Performance面板）。此外，注意闭包导致的内存占用，及时释放不再需要的引用，有助于防止内存泄漏。
// 简单内存管理示例：避免在全局作用域中保存大量引用
function createTempData() {const data = new Array(1000).fill(0);return function get() {return data[0];};
}
const getTemp = createTempData();
// 当不再需要时，移除引用
getTemp = null;
