将几个 class 实例添加到 'container' class 属性对象

Question

我创建了两个类，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 的控制台，它似乎覆盖了第一个：

我是否应该使用 getter 来查看 .products 的内容？或者关于 setter 或者我如何使用它？

谢谢

Answer 1

我只想创建一个名为 addItem 的方法，然后将项目添加到 'cart' 而不是执行您正在执行的操作。

class jsCart {
  constructor() {
    this.products = {};
    this.sum = 0;     
  }
  //You don't really need this
  //set _products(product) {
  //  this.products[product.id] = product;
  //}

  //This should work
  addProduct(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'];
    }
  }
}

cart.addProduct(...);

Answer 2

首先，您不应该为 class 实例提供与 class 本身相同的名称。此外，Javascript class 名称的约定是使用 Pascal 大小写。

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

class JSCart{
   ....
}

要创建 JSCart 的实例：

let jsCart = new JSCart();

此外，我会考虑使用 setter 的方式，因为 setter 不会设置的值 products，但它将产品添加到您的 products。更好的方法是创建一种方法来添加新产品。

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

Example for creating two products and retrieving the cart's products

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

将几个 class 实例添加到 'container' class 属性对象

Add several class instances to a 'container' class property object

javascript

oop

ecmascript-6

es6-class

将几个 class 实例添加到 'container' class 属性 对象

Add several class instances to a 'container' class property object

javascript

oop

ecmascript-6

es6-class

将几个 class 实例添加到 'container' class 属性对象