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);
}

使用OO JavaScript的购物车

2 个答案: