javascript - 设置或删除项目时如何查找 Map() 中的更改？

Question

我正在设置一个用于将商品添加到购物车的类。购物车项目存储在 Map() 中。现在我想在每次更改 map 时将项目保存为 cookie。因此，当我调用 map.set() 或 map.delete() 时，我想触发一个保存功能。但是我不想在发生“更改内容”的每一行代码中自动调用它。

我已经尝试过使用代理，但由于我需要至少支持 IE11，所以我不能使用它。

import Product from "./product";


export default class Cart {
  constructor() {
    this.items = new Map();

  }

  watchForChanges(id) {
    // watch if this.item is changed
    // call saveItem if is changed
  }

  saveItem () {
    // save item

  }

  addItem(id, count, callback) {
    if (this.items.has(id)) {
      this.items.get(id).count += count;  
      callback( this.items.get(id) );
      return true;
    }

    this.newItem(id, count, callback);

  }

  newItem(id, count, callback) {
    let product = new Product(id);
    product.then((resolvedProduct) => {
      this.items.set(id, {} = resolvedProduct );
      this.watchForChanges(id);
      callback(this.items.get(id));
    }).catch((reject) => {
      Error("Network Error")
    });
  }


  removeItem(id, count = this.items.get(id).count, callback) {

    if (!this.items.has(id)) return false;

    let newCount = this.items.get(id).count -= count;
    if (newCount <= 0) this.items.delete(id);

    callback();

  }
//some more functions



}

现在我每次更改内容时都可以调用 saveItem()。我如何创建类似 eventListener 的东西来设置和删除 Map() 中的项目； ？

Answer 1

经过一些研究:我发现 babel 没有用于扩展内置类的 polyfills https://babeljs.io/docs/en/caveats/#classes

class MyMap extend Map {
//...
}

我现在所做的是为 Map() 的原型(prototype)创建一个函数并调用一个保存函数……不是很好，但它可以工作……

constructor() {

    this.items = new Map();
    let onupdate = this;
    Map.prototype.setItem = function (key, val) {
      this.set(key, val);
      onupdate.saveItem();
      return true;
    }

    Map.prototype.deleteItem = function (key,) {
      this.delete(key);
      onupdate.saveItem();
      return true;
    }


  }