JavaScript购物车挑战是否存在多种解法？新手技术咨询

阿华AIGC实验室

2026-5-19

购物车挑战的多种实现解法探讨

嘿，刚学完JavaScript入门课程就动手写购物车代码，还主动对比不同实现方式，这学习态度真的超赞！😎 先给你明确答案：购物车挑战当然存在多种完全可行的实现解法，不同写法其实对应了JS里不同的编程范式和场景需求，我来给你拆解清楚：

1. 你提到的两种核心实现方式

基于`this`关键字的构造函数/类写法

这种是经典的面向对象（OOP）写法，用构造函数或者ES6类来创建购物车实例，this用来指代当前实例的属性和方法，示例代码大概是这样：

class ShoppingCart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  calculateTotal() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

// 创建一个购物车实例
const myCart = new ShoppingCart();
myCart.addItem({ name: 'Apple', price: 5 });

这种写法的优势是可以轻松创建多个独立的购物车实例，每个实例都有自己的状态，适合需要同时处理多用户购物车这类场景。

你写的基于普通对象的写法

这种是用对象字面量直接封装属性和方法，不需要new关键字，代码更简洁：

const shoppingCart = {
  items: [],
  addItem(item) {
    // 这里你可能用了shoppingCart.items.push(item)，或者其实也用到了this
    this.items.push(item);
  },
  calculateTotal() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
};

shoppingCart.addItem({ name: 'Banana', price: 3 });

这属于单例模式的简单实现，适合只需要一个全局购物车的场景，代码量少，上手门槛低，作为新手能写出这种解法已经很优秀了！

2. 其他常见的实现思路

除了上面两种，还有几种实用的写法，对应不同的需求：

基于闭包的模块化写法
这种写法可以隐藏内部状态（比如items数组），只暴露需要的方法，避免外部直接修改内部数据，安全性更高：

function createShoppingCart() {
  // 私有变量，外部无法直接访问
  let items = [];

  return {
    addItem(item) {
      items.push(item);
    },
    calculateTotal() {
      return items.reduce((sum, item) => sum + item.price, 0);
    },
    // 返回数组副本，避免外部修改原数据
    getItems() {
      return [...items];
    }
  };
}

const myCart = createShoppingCart();
myCart.addItem({ name: 'Orange', price: 4 });

如果你担心外部代码不小心修改了购物车的内部数据，这种写法会很合适。

基于函数式编程的写法
要是你偏向函数式思路，会把购物车状态作为参数传递，避免副作用（不修改原对象，而是返回新状态）：

// 纯函数：添加商品，返回新的购物车对象
const addItem = (cart, item) => ({
  ...cart,
  items: [...cart.items, item]
});

// 纯函数：计算总价
const calculateTotal = (cart) => 
  cart.items.reduce((sum, item) => sum + item.price, 0);

// 初始化购物车
let myCart = { items: [] };
// 更新购物车状态（返回新对象）
myCart = addItem(myCart, { name: 'Grape', price: 6 });
const total = calculateTotal(myCart);

这种写法没有修改原对象，适合需要追踪状态变化的场景，比如和React这类框架配合使用时会很顺手。