1. JavaScript函数与闭包深度解析1.1 函数定义与执行上下文在JavaScript中函数是构建复杂应用的基础单元。函数定义方式主要有三种// 函数声明 function sayHello(name) { return Hello, ${name}!; } // 函数表达式 const sayHello function(name) { return Hello, ${name}!; }; // 箭头函数 const sayHello (name) Hello, ${name}!;每种定义方式都有其特点函数声明会提升(hoisting)可以在定义前调用函数表达式不会提升必须在定义后调用箭头函数没有自己的this绑定适合作为回调函数函数执行时会创建执行上下文(Execution Context)包含变量环境(Variable Environment)词法环境(Lexical Environment)this绑定1.2 闭包原理与实现机制闭包是JavaScript最强大的特性之一。当一个函数可以记住并访问所在的词法作用域即使函数是在当前词法作用域之外执行就产生了闭包。function outer() { let count 0; return function inner() { count; return count; }; } const counter outer(); console.log(counter()); // 1 console.log(counter()); // 2闭包的形成需要三个关键条件函数嵌套内部函数引用外部函数的变量内部函数在外部函数作用域外被调用1.3 闭包的常见应用场景闭包在实际开发中有多种应用数据封装创建私有变量function createCounter() { let value 0; return { increment() { value }, decrement() { value-- }, getValue() { return value } }; }函数工厂动态生成函数function multiplier(factor) { return function(x) { return x * factor; }; } const double multiplier(2); const triple multiplier(3);模块模式实现模块化const calculator (function() { let memory 0; return { add(x) { memory x }, subtract(x) { memory - x }, getMemory() { return memory } }; })();2. JavaScript对象系统深度剖析2.1 对象创建与原型链JavaScript使用原型继承而非类继承。每个对象都有一个隐藏的[[Prototype]]属性指向其原型对象。// 对象字面量 const person { name: John, age: 30 }; // 构造函数 function Person(name, age) { this.name name; this.age age; } Person.prototype.greet function() { console.log(Hello, Im ${this.name}); }; const john new Person(John, 30);原型链查找规则先在对象自身属性中查找如果找不到沿着[[Prototype]]向上查找直到找到或到达null(Object.prototype的[[Prototype]])2.2 现代类语法与继承ES6引入了class语法糖使原型继承更直观class Animal { constructor(name) { this.name name; } speak() { console.log(${this.name} makes a noise.); } } class Dog extends Animal { constructor(name) { super(name); } speak() { console.log(${this.name} barks.); } }class语法特点constructor方法用于初始化extends实现继承super调用父类构造函数或方法方法自动添加到原型上2.3 属性描述符与对象控制JavaScript对象属性有丰富的描述符const obj {}; Object.defineProperty(obj, readOnlyProp, { value: 42, writable: false, enumerable: true, configurable: false });属性描述符类型数据描述符value, writable访问器描述符get, set通用描述符enumerable, configurable对象控制方法Object.defineProperty()Object.defineProperties()Object.freeze()Object.seal()Object.preventExtensions()3. 函数与对象的高级应用3.1 高阶函数与函数组合高阶函数是接收或返回函数的函数// 接收函数作为参数 function map(array, transform) { const result []; for (let item of array) { result.push(transform(item)); } return result; } // 返回函数 function createLogger(prefix) { return function(message) { console.log([${prefix}] ${message}); }; }函数组合是将多个函数合并为一个function compose(...fns) { return function(x) { return fns.reduceRight((v, f) f(v), x); }; } const add5 x x 5; const multiply3 x x * 3; const addThenMultiply compose(multiply3, add5); console.log(addThenMultiply(2)); // 213.2 对象代理与反射Proxy对象可以拦截并自定义对象基本操作const handler { get(target, prop) { console.log(Getting property ${prop}); return target[prop]; }, set(target, prop, value) { console.log(Setting property ${prop} to ${value}); target[prop] value; return true; } }; const proxy new Proxy({}, handler); proxy.name John; // Logs Setting property name to John console.log(proxy.name); // Logs Getting property name then JohnReflect对象提供拦截操作的默认行为const obj { x: 1, y: 2 }; console.log(Reflect.has(obj, x)); // true console.log(Reflect.deleteProperty(obj, y)); // true3.3 迭代器与生成器迭代器协议定义了标准的方式来产生一系列值const myIterable { [Symbol.iterator]: function() { let step 0; return { next() { step; if (step 3) { return { value: step, done: false }; } return { done: true }; } }; } }; for (const value of myIterable) { console.log(value); // 1, 2, 3 }生成器函数简化了迭代器创建function* idGenerator() { let id 1; while (true) { yield id; } } const gen idGenerator(); console.log(gen.next().value); // 1 console.log(gen.next().value); // 24. 性能优化与常见问题4.1 闭包的内存管理闭包可能导致内存泄漏的常见场景// 问题代码 function setup() { const data getHugeData(); document.getElementById(btn).addEventListener(click, () { process(data); }); }解决方案及时移除事件监听使用弱引用(WeakMap, WeakSet)手动释放引用// 改进代码 function setup() { const data getHugeData(); const btn document.getElementById(btn); function handler() { process(data); } btn.addEventListener(click, handler); // 在适当时候移除 return function cleanup() { btn.removeEventListener(click, handler); }; }4.2 原型继承的性能考量原型链过长会影响属性查找速度// 创建深度原型链 function createChain(depth) { let current {}; for (let i 0; i depth; i) { const parent {}; Object.setPrototypeOf(current, parent); current parent; } return current; } const obj createChain(100);优化建议保持原型链扁平优先使用对象组合而非继承对于频繁访问的属性可缓存到本地4.3 常见陷阱与最佳实践意外的全局变量function foo() { bar global; // 意外创建全局变量 }循环中的闭包// 问题代码 for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); // 总是输出5 } // 解决方案 for (let i 0; i 5; i) { setTimeout(() console.log(i), 100); }原型污染// 避免修改内置原型 Array.prototype.myMethod function() { ... }; // 不推荐最佳实践使用严格模式(use strict)优先使用const/let而非var使用Object.create(null)创建纯净对象避免过深的原型链合理使用闭包注意内存管理