神奇的 JavaScript 代理 Proxy

2023-09-30 05:19:11

众所周知，Proxy 按字面意思就是代理，其API官方使用手册详见 MDN。我们可以将 Proxy 理解为现实生活中的代理商，通过几个常见的卖货场景来学习一番。

场景一：调解砍价

买家和卖家在砍价时，砍到面红耳赤，这时，可以请一位代理商来调解。

// 创建代理商，传入卖家对象和砍价函数
const agent = new Proxy(seller, {
  // 代理商砍价函数
  set: function(obj, prop, value) {
    // 砍价幅度不能超过 20%
    if (prop === 'price' && value < 0.8 * obj[prop]) {
      console.log('砍价幅度太大，代理商拒绝');
      return false;
    }
    // 砍价成功，代理商更新价格
    obj[prop] = value;
    console.log('砍价成功，新价格为：', value);
    return true;
  }
});

// 买家通过代理商砍价
agent.price = 100;

场景二：记录商品信息

买家购买商品时，想知道商品的详细信息。

// 创建代理商，传入商品对象和记录函数
const agent = new Proxy(product, {
  // 代理商记录商品信息函数
  get: function(obj, prop) {
    // 记录商品被访问的次数
    if (prop === 'name') {
      console.log('商品名称被访问');
    }
    // 返回商品信息
    return obj[prop];
  }
});

// 买家通过代理商查看商品信息
console.log(agent.name);

场景三：检查商品质量

买家在购买商品前，需要检查商品的质量。

// 创建代理商，传入商品对象和质量检查函数
const agent = new Proxy(product, {
  // 代理商检查商品质量函数
  get: function(obj, prop) {
    // 检查商品质量
    if (prop === 'quality') {
      if (obj[prop] === 'bad') {
        console.log('商品质量不合格，代理商拒绝购买');
        return false;
      }
    }
    // 返回商品信息
    return obj[prop];
  }
});

// 买家通过代理商购买商品
if (agent.quality) {
  console.log('商品质量合格，代理商购买商品');
}