时间戳

首页 > 解决方案 > 将多个类实例添加到“容器”类属性对象

javascript - 将多个类实例添加到“容器”类属性对象

问题描述

我创建了两个类，代表商店购物车的 jsCart 和代表产品的 jsProduct。

jsCart 应该有一个对象作为属性来存储 jsProduct 实例。

我的问题是如何将 jsProduct 实例添加到 jsCart 的该对象属性。

这是 jsCart（相关位）

class jsCart {
  constructor() {
    this.products = {};
    this.sum = 0;     
  }

  set _products(product) {
    this.products[product.id] = product;
  }

  remove(id) {
    delete this.products[id];
  }

  updateSum() {
    for (var product in this.products) {
      this.sum += this.products[product]['sum'];
    }
  }
}

和 jsProduct （相关位）：

class jsProduct {
  constructor(id, price, quantity) {
    this.id = id;
    this.price = price;
    this.quantity = quantity;
    this.sum = this.price * this.quantity;
  }

  set _quantity(n) {
    this.quantity = n;
    this.sum = this.price * this.quantity;
  }
}

我尝试将产品添加到购物车：

jsCart._products = new jsProduct('bananas',23,1);

这似乎确实有效，但是当我尝试添加另一个产品时，如果我正确使用了 chrome 的控制台，它似乎覆盖了第一个：

在此处输入图像描述

也许我应该使用吸气剂来查看 .products 的内容？或有关二传手或我如何使用它的东西？

谢谢

标签： javascriptoopecmascript-6es6-class

解决方案

首先，您不应该为您的类实例赋予与类 itelt 相同的名称。此外，Javascript 类名的约定是用 Pascal Casing 编写它们。

因此，在您的情况下，它将是：

class JSCart{
   ....
}

创建一个实例JSCart：

let jsCart = new JSCart();

另外，我会考虑以你做不好风格的方式使用 setter，因为 setter 不会为设置值products，但它会向你的products. 更好的方法是创建一种添加新产品的方法。

从技术上讲，您的解决方案应该有效。唯一不起作用的是使用不存在的吸气剂（在您的情况下为jsCart._products）检索您当前的产品。相反，您可以简单地将产品作为购物车的属性进行访问。

创建两个产品并检索购物车产品的示例

此外，重新考虑是否需要将产品存储在对象中。在我看来，数组更适合您的情况。当以您的方式使用对象时，您不可能添加两个具有相同名称的产品（例如“apple”和“apple”），因为第二个产品会覆盖第一个产品。使用对象的优点是可以通过名称直接访问产品。如果您不需要这个并且您只需要存储已添加到用户购物车的产品，则首选数组。

推荐阅读