1. 函数定义的基本语法与差异
1.1 函数声明与函数表达式的区别
在 JavaScript 的函数定义与调用场景中，函数声明采用 function 名称(params) { ... } 的形式，具有提升（hoisting）的特性，意味着在变量声明之前就可以调用。函数声明让代码的结构更清晰，便于在同一作用域中多次复用。
另一方面，函数表达式把函数赋值给一个变量，常见形式是 const f = function(params) { ... }。与声明不同，变量提升时机不包含函数体，因此在赋值之前调用会报错。这种形式更灵活，适合按需创建具名或匿名的函数。
// 函数声明
function greet(name){return `Hello, ${name}`;
}// 函数表达式
const greetExpr = function(name){return `Hi, ${name}`;
};1.2 箭头函数的特性与适用场景
箭头函数提供了更简洁的语法，并且它们不绑定自己的 this、arguments、super 与 new.target，因此更适合做回调和函数式编程中的轻量逻辑。若你需要一个独立的 this 来驱动对象方法，普通函数通常更合适。
在日常开发中，箭头函数常用于数组方法的回调、数组变换、以及函数式组合。请注意它们的 词法作用域特性，以及在构造函数中使用将导致错误的事实。
// 箭头函数的简写
const add = (a, b) => a + b;// 适合回调的箭头函数
[1,2,3].map(n => n * 2);2. 函数调用的基本规则与 this 指向
2.1 this 的指向与调用方式
在 JavaScript 中，this 的值取决于函数的调用方式。作为对象方法调用时，this 指向该对象；独立函数调用时，this 指向全局对象（严格模式为 undefined）。
为了显式绑定 this，可以使用 call、apply、bind，将一个对象作为 this 的上下文传入，从而在不同环境下复用同一段逻辑。
const obj = { x: 10 };
function show() { return this.x; }// 方法调用
obj.getX = show;
console.log(obj.getX()); // 10// 独立函数调用
console.log(show()); // 全局 this.x 或 undefined (严格模式)2.2 this 的字面量与箭头函数的影响
与普通函数不同，箭头函数没有自己的 this，它会从最近的非箭头外层函数或全局作用域继承 this。这使得箭头函数非常适合在回调中保持上下文一致。
在实际场景中，若要在回调中绑定一个固定的 this，使用箭头函数或显式绑定是常见做法。
const obj = { value: 42 };
class Counter {constructor() {this.value = 0;}incrementLater() {setTimeout(() => { this.value++; }, 100);}
}
3. 参数传递的细节与默认参数、剩余参数
3.1 默认参数与解构赋值
函数参数的默认值可以避免传入 undefined 时的错误。使用 默认参数，你可以在参数列表中为参数设定初始值，提升鲁棒性。
解构赋值允许直接从对象或数组中提取参数，简化调用代码并提供更清晰的接口。解构默认值可结合默认值使用，以增强接口的容错性。
function greet(name = 'Guest') {return `Hello, ${name}`;
}
function login({ user = 'anonymous', pass = '' } = {}) {return `User: ${user}, Pass: ${pass}`;
}
3.2 剩余参数与展开运算符
使用 剩余参数（...args）可以把不确定数量的参数收集成一个数组，提供更灵活的 API。
展开运算符用于在调用时解开数组或类数组对象，便于传递给函数。
function sum(...nums) {return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1,2,3,4)); // 10const arr = [1,2,3];
console.log(Math.max(...arr)); // 34. 实战：闭包、柯里化与函数组合
4.1 闭包的基本用法与内存管理
闭包允许函数记住并访问它们定义时的词法作用域，即便在外部执行环境已经改变。私有变量与封装通常借助闭包实现。
要注意的是，过度使用闭包可能导致内存泄露（尤其是在长生命周期对象中保持对外部变量的引用）。合理设计清除引用、使用 IIFE 可以缓解。
function counterFactory() {let count = 0;return function() {count++;return count;};
}
const c = counterFactory();
console.log(c()); // 1
console.log(c()); // 24.2 柯里化与函数式编程
柯里化把一个多参数函数转换成一系列单参数函数的过程，便于部分应用与组合。组合函数可以把简单函数串联起来形成复杂行为。
在前端架构中，柯里化和函数组合有助于创建可重用的处理流水线，提升代码的可读性和测试性。
const add = a => b => a + b;
const add2 = add(2);
console.log(add2(3)); // 5const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const double = y => y * 2;
const toString = z => z.toString();
const pipeline = compose(toString, double);
console.log(pipeline(5)); // "10"5. 性能优化与调试技巧
5.1 函数缓存与记忆化
记忆化（memoization）通过缓存函数的输出，避免重复计算，显著提升昂贵计算的性能，尤其是在纯函数场景下。
实现一个通用的 memoize 装饰器时，需考虑参数的可哈希性、缓存清理策略与内存消耗。合理使用可以获得稳定的性能收益。
function memoize(fn) {const cache = new Map();return function(...args) {const key = JSON.stringify(args);if (cache.has(key)) return cache.get(key);const res = fn.apply(this, args);cache.set(key, res);return res;};
}
const fib = n => (n <= 1 ? n : fib(n-1) + fib(n-2)); // 递归示例通常需要装饰器 Memoize
const fibMemo = memoize(fib);
console.log(fibMemo(10)); // 结果较快5.2 节流、防抖与执行策略
在高频事件处理中，节流与防抖是常用的执行策略，可以减少回调的调用次数，降低浏览器压力。
节流确保在固定时间间隔内执行一次，而防抖只有在事件停止触发一段时间后才执行。结合 this 指向与参数传递，可以保持一致的上下文。
function throttle(fn, interval) {let last = 0;return function(...args) {const now = Date.now();if (now - last >= interval) {last = now;return fn.apply(this, args);}};
}
function debounce(fn, delay) {let t;return function(...args) {clearTimeout(t);t = setTimeout(() => fn.apply(this, args), delay);};
}
6. 兼容性与跨环境注意事项
6.1 浏览器差异与 Polyfill
不同浏览器对某些 函数特性 的实现存在差异，特别是较早的浏览器对 默认参数、箭头函数、严格模式 的支持。使用 Polyfill 可以提升广泛兼容性。
在开发阶段，持续的浏览器测试与来自 性能基准测试 的数据有助于发现回归问题。遵循前端社区共识的最佳实践也有助于长期维护。
// 仅用于旧浏览器的默认参数 Polyfill（示例，实际生产需完整实现）
if (!Function.prototype.bind) {Function.prototype.bind = function(ctx) {const fn = this;return function() {return fn.apply(ctx, arguments);};};
}
6.2 Node.js 环境中的函数定义
在 Node.js 的模块化环境中，导出与导入函数定义会影响到作用域和缓存行为。利用 module.exports 与 exports 可以实现模块化复用。
无论是在服务端渲染还是构建工具链中，正确的 函数作用域与上下文 管理，能避免潜在的内存泄露和调用错误。
// Node.js 模块导出示例
function multiply(a, b) { return a * b; }
module.exports = { multiply };