let bill = {};  // 創(chuàng)建賬單對(duì)象

Object.defineProperty(bill, 'amount', {
  get() {
    console.log('客人查詢了賬單金額');
    return 100; // 假設(shè)賬單金額是100
  },
  set(value) {
    console.log(`客人修改了賬單金額為 ${value}`);
  }
});

console.log(bill.amount);  // 觸發(fā) get 方法，查詢金額
bill.amount = 200;         // 觸發(fā) set 方法，修改金額

let house = { temperature: 22, light: 'off' }; // 房子里的設(shè)備

let smartHouse = new Proxy(house, {
  get(target, key) {
    console.log(`查詢 ${key} 的狀態(tài)：${target[key]}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`修改 ${key} 的狀態(tài)為 ${value}`);
    target[key] = value;
    return true;
  }
});

console.log(smartHouse.temperature);  // 觸發(fā) get，查詢溫度
smartHouse.light = 'on';              // 觸發(fā) set，修改燈光狀態(tài)

let person = { name: 'Alice', age: 25 };

function makeReactive(obj) {
  for (let key in obj) {
    let value = obj[key];
    Object.defineProperty(obj, key, {
      get() {
        console.log(`讀取 ${key}: ${value}`);
        return value;
      },
      set(newVal) {
        console.log(`修改 ${key} 為 ${newVal}`);
        value = newVal;
      }
    });
  }
}

makeReactive(person);

console.log(person.name);  // 讀取 name
person.age = 30;           // 修改 age

let person = { name: 'Alice', age: 25 };

let reactivePerson = new Proxy(person, {
  get(target, key) {
    console.log(`讀取 ${key}: ${target[key]}`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`修改 ${key} 為 ${value}`);
    target[key] = value;
    return true;
  },
  deleteProperty(target, key) {
    console.log(`刪除屬性 ${key}`);
    return delete target[key];
  }
});

console.log(reactivePerson.name);  // 讀取 name
reactivePerson.age = 30;           // 修改 age
reactivePerson.newProp = 'test';   // 監(jiān)聽新增屬性
delete reactivePerson.age;         // 監(jiān)聽刪除屬性