购物车使用OO javascript [关闭]

Question

我正在尝试使用javascript和原型创建一个简单的购物车。

只是一个简单的控制台应用

我想打电话给myBasket.prototype.addItems在inventory[]添加项目，同样我想调用myBasket.prototype.addQuantity和myBasket.prototype.totalAmount来增加一个项目的数量并分别总计总金额。

我被困的地方是如何打电话给myBasket.prototype.addItems来做必要的事情？这是我被困的地方。

var inventory =
[
    { name: "apples", price: 19.95, quantity: 50 },
    { name: "oranges", price: 20.99, quantity: 40 },
    { name: "pineapples", price: 40.00, quantity: 60 },
    { name: "lemons", price: 10.12, quantity: 100 }
]

function myBasket(name, price, quantity){
   this.name = name;
   this.price = price,
   this.quantity = quantity;
   items.push(this);
}

myBasket.prototype.addItems = function(){
    console.log('items added to cart')
}

myBasket.prototype.addQuantity = function(){
    console.log('item quantity added to cart')
}

myBasket.prototype.totalAmount = function(){
    console.log('Total amount is');
    var total = this.price * this.quantity;
}

// newItem.prototype = Object.create(myBasket.prototype);

var newItem = [];
newItem = new myBasket({name:'milk', price:80,quantity: 2});
newItem.push(this.items);
console.log('new item(s) added', items);

var checkoutAmount = new myBasket();
console.log('checkout amount');

Answer 1

不，既然你是OOP的新手，那就这么想吧。每件事都是一个对象。所以在你的情况下，你应该有class Item和class Basket你还应该有一个方法来添加和删除你的篮子里的项目。

请参阅下面的代码片段

class Item{
  constructor(name,price,quantity) {
    this.name = name;
    this.price = price;
    this.quantity = quantity;
  }
}

class Basket {
  constructor() {
    this.items = []
  }
  
  addItem(item){
    this.items.push(item)
  }
}

let items = [
  new Item("apples",40,20),
  new Item("lemons",32,38),
  new Item("mangos",44,67),
  new Item("pineapples",32,88)
]

let basket = new Basket()

let market = document.getElementById("market")
let s = items.map((item,id)=>"<button onClick=addItem("+id+")>Add "+item.name+"</button>").join("")
market.innerHTML = s

function addItem(id) {
  basket.addItem(items[id])
  showBasket()
}

function showBasket() {
  let cart = document.getElementById("items")
  let s = basket.items.map((item,id)=>"<span style='margin: 5px'>"+item.name+"</span>").join("")
  cart.innerHTML = s
}

<fieldset>
  <legend>Basket</legend>
<div id="items"></div>
</fieldset>
<div id="market"></div>

希望这能回答你的问题

由于编辑问题并添加到使用原型，我将再次使用函数原型进行详细说明

function Item(name,price,quantity) {
  this.name = name;
  this.price = price;
  this.quantity = quantity;
}

function Basket() {
  this.items = []
}

Basket.prototype.addItem = function(item) {
  this.items.push(item);
}

    let items = [
      new Item("apples",40,20),
      new Item("lemons",32,38),
      new Item("mangos",44,67),
      new Item("pineapples",32,88)
    ]

    let basket = new Basket()

    let market = document.getElementById("market")
    let s = items.map((item,id)=>"<button onClick=addItem("+id+")>Add "+item.name+"</button>").join("")
    market.innerHTML = s

    function addItem(id) {
      basket.addItem(items[id])
      showBasket()
    }

    function showBasket() {
      let cart = document.getElementById("items")
      let s = basket.items.map((item,id)=>"<span style='margin: 5px'>"+item.name+"</span>").join("")
      cart.innerHTML = s
    }

<fieldset>
<legend>Basket</legend>
<div id=items></div>
</fieldset>
<div id=market></div>

Answer 2

要将项添加到数组，请使用push()：

function myBasket(name, price, quantity){
    this.name = name;
    this.price = price,
    this.quantity = quantity;
    items.push(this);
}