JavaScript进阶核心：异步编程与面向对象精要
JavaScript的深入学习需要掌握几个关键概念。这些知识不仅在面试中经常出现，在实际开发中也十分重要。本文将重点介绍异步编程、面向对象原理和常用高阶函数的实现方法。
函数式编程实用技巧
柯里化函数的实现
柯里化是把接收多个参数的函数变成接收单个参数函数序列的技术。下面是一个实用的柯里化函数实现：
function curry(fn, ...presetArgs) {
return function curried(...newArgs) {
// 合并之前和当前的参数
const allArgs = [...presetArgs, ...newArgs];
// 参数数量足够时执行原函数
if (allArgs.length >= fn.length) {
return fn(...allArgs.slice(0, fn.length));
}
// 参数不够时继续收集
return curry(fn, ...allArgs);
};
}
// 使用示例
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6柯里化的好处是能够创建更专用的函数，提高代码复用性。
记忆化函数优化性能
对于计算量大的纯函数，可以使用记忆化来缓存结果：
function memoize(fn) {
const cache = new Map();
return function(...args) {
// 用参数的JSON字符串作为缓存键
const key = JSON.stringify(args);
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}
// 使用示例：缓存斐波那契数列计算
const fibonacci = memoize(function(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
});
console.log(fibonacci(40)); // 第一次计算较慢
console.log(fibonacci(40)); // 第二次直接从缓存读取，很快深入理解异步编程
事件循环机制
JavaScript的事件循环是理解异步的关键。执行顺序如下：
执行所有同步代码
执行所有微任务（Promise回调等）
如有需要，进行页面渲染
执行一个宏任务（setTimeout等）
回到第2步，清空微任务队列
看这个例子：
console.log('开始');
setTimeout(() => {
console.log('定时器回调');
}, 0);
Promise.resolve().then(() => {
console.log('Promise回调1');
}).then(() => {
console.log('Promise回调2');
});
console.log('结束');
// 输出顺序：
// 开始
// 结束
// Promise回调1
// Promise回调2
// 定时器回调微任务总是在下一个宏任务之前执行完毕。
Promise方法对比
不同的Promise方法适用于不同场景：
Promise.all：所有Promise都成功才算成功
const promises = [fetch('/api1'), fetch('/api2')];
const results = await Promise.all(promises);Promise.race：第一个完成的结果（无论成功失败）
// 超时控制
const timeout = new Promise((_, reject) => {
setTimeout(() => reject('超时'), 5000);
});
const data = await Promise.race([fetch('/api'), timeout]);Promise.allSettled：等待所有Promise完成，不关心成功失败
const results = await Promise.allSettled(promises);
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('成功:', result.value);
} else {
console.log('失败:', result.reason);
}
});Promise.any：第一个成功的结果
// 多资源加载，只要有一个成功即可
const resource = await Promise.any([
fetch('/cdn1/resource'),
fetch('/cdn2/resource')
]);async/await错误处理
三种常见的错误处理方式：
try/catch - 最直观的方式
async function fetchData() {
try {
const data = await fetch('/api');
return data;
} catch (error) {
console.error('请求失败:', error);
return null;
}
}Promise.catch - 简洁的方式
async function fetchData() {
const data = await fetch('/api').catch(error => {
console.error('请求失败:', error);
return null;
});
return data;
}工具函数封装 - 类似Go语言风格
function to(promise) {
return promise
.then(data => [null, data])
.catch(error => [error, null]);
}
async function fetchData() {
const [error, data] = await to(fetch('/api'));
if (error) {
console.error('请求失败:', error);
return null;
}
return data;
}面向对象与原型
原型链机制
每个JavaScript对象都有原型，形成原型链：
function Person(name) {
this.name = name;
}
// 方法定义在原型上
Person.prototype.sayHello = function() {
console.log(`你好，我是${this.name}`);
};
const person = new Person('小明');
person.sayHello(); // 你好，我是小明
// 原型链查找过程：
// person -> Person.prototype -> Object.prototype -> null实现new操作符
理解new操作符的原理很重要：
function myNew(constructor, ...args) {
// 1. 创建新对象，链接原型
const obj = Object.create(constructor.prototype);
// 2. 执行构造函数，绑定this
const result = constructor.apply(obj, args);
// 3. 返回结果（如果构造函数返回对象则用该对象）
return result instanceof Object ? result : obj;
}
// 使用示例
function Car(brand) {
this.brand = brand;
}
Car.prototype.getBrand = function() {
return this.brand;
};
const myCar = myNew(Car, 'Toyota');
console.log(myCar.getBrand()); // Toyota实现instanceof
instanceof操作符的原理：
function myInstanceof(obj, constructor) {
let currentProto = Object.getPrototypeOf(obj);
const targetProto = constructor.prototype;
while (currentProto !== null) {
if (currentProto === targetProto) {
return true;
}
currentProto = Object.getPrototypeOf(currentProto);
}
return false;
}
// 使用示例
console.log(myInstanceof([], Array)); // true
console.log(myInstanceof({}, Object)); // trueES6 class语法
class是原型的语法糖，让代码更清晰：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} 发出声音`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // 调用父类构造函数
this.breed = breed;
}
speak() {
super.speak(); // 调用父类方法
console.log('汪汪!');
}
}
const dog = new Dog('旺财', '金毛');
dog.speak();继承方式比较
JavaScript有多种继承方式，各有优缺点：
原型链继承 - 简单但有共享问题
构造函数继承 - 解决共享问题但无法继承方法
组合继承 - 常用但效率不高
寄生组合继承 - 最优方案
class extends - ES6推荐方式
实用建议
异步编程重点理解事件循环，掌握Promise各种方法的适用场景
面向对象要理解原型链的本质，class只是语法糖
函数式编程掌握柯里化和记忆化等技巧，提升代码质量
手写实现不要死记硬背，要理解每个步骤的原理
这些知识需要结合实际项目来巩固。可以先从理解概念开始，然后在工作中寻找应用场景，逐步深入掌握。记住，理解原理比记住代码更重要。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
