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)); // true

ES6 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只是语法糖
函数式编程掌握柯里化和记忆化等技巧，提升代码质量
手写实现不要死记硬背，要理解每个步骤的原理

这些知识需要结合实际项目来巩固。可以先从理解概念开始，然后在工作中寻找应用场景，逐步深入掌握。记住，理解原理比记住代码更重要。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13152