Object.defineProperty 和 Proxy，即响应式编程的应用场景

无论是Object.defineProperty，还是Proxy，共同点就是，访问到数据的时候触发get方法，修改数据的时候set方法。

它们的共同点在于都可以在对象属性被访问或修改时执行特定的函数或逻辑，即“拦截”这些操作。

Object.defineProperty

这是一个用于直接在对象上定义一个新属性，或者修改现有属性，并返回这个对象的方法。
当使用 Object.defineProperty 定义属性时，可以指定该属性的访问器属性（getter 和 setter）。
get 是一个函数，当属性被访问时会调用这个函数。它不接受参数，但可以返回一个值。
set 是一个函数，当属性值被修改时会调用这个函数。它接受一个参数，即要设置的新值。
通过这种方式，你可以在属性被读取或修改时执行自定义的逻辑。

Proxy

Proxy 是ES6引入的功能，用于创建一个可以自定义基本操作（例如属性查找、赋值、枚举、函数调用等）的对象。
Proxy 通过两个主要参数来工作：目标对象和处理器对象（handler）。处理器对象可以定义捕获器（trap），这些捕获器是拦截操作的函数。
get 捕获器用于拦截对属性的读取操作。
set 捕获器用于拦截对属性的写入操作。
使用 Proxy，你可以在对象属性被访问和修改时执行更复杂和灵活的逻辑。

总结来说，这两种方法的共同点在于它们都可以用来在对象属性的访问和修改时执行自定义的操作逻辑。Object.defineProperty 更适合于单个属性的细粒度控制，而 Proxy 则提供了对整个对象多种操作的全面拦截能力。

具体的应用场景和示例

1.数据绑定和响应式编程

使用 Object.defineProperty

在Vue.js 2中，响应式系统就是基于 Object.defineProperty 实现的。通过定义属性的 getter 和 setter，可以在属性被访问或修改时进行依赖收集和派发更新。

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      console.log(`Getting value: ${val}`);
      return val;
    },
    set(newVal) {
      console.log(`Setting value: ${newVal}`);
      if (newVal !== val) {
        val = newVal;
        // 通常在这里触发视图更新
      }
    }
  });
}

const data = {};
defineReactive(data, 'price', 5);

console.log(data.price); // Getting value: 5
data.price = 20; // Setting value: 20

使用 Proxy

在Vue.js 3中，响应式系统使用 Proxy 实现，允许对整个对象进行拦截。

const handler = {
  get(target, prop) {
    console.log(`Getting value: ${target[prop]}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting value: ${value}`);
    target[prop] = value;
    // 通常在这里触发视图更新
    return true;
  }
};

const data = new Proxy({}, handler);

data.price = 5; // Setting value: 5
console.log(data.price); // Getting value: 5

2.数据验证和格式化

使用 Object.defineProperty

可以在设置属性时进行数据验证。

const user = {};
Object.defineProperty(user, 'age', {
  set(value) {
    if (typeof value !== 'number' || value < 0) {
      throw new Error('Age must be a positive number');
    }
    this._age = value;
  },
  get() {
    return this._age;
  }
});

user.age = 25; // 设置成功
console.log(user.age); // 输出: 25
// user.age = -5; // 抛出错误: Age must be a positive number

使用 Proxy

可以更灵活地处理数据验证和格式化。

const validator = {
  set(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0) {
        throw new Error('Age must be a positive number');
      }
    }
    target[prop] = value;
    return true;
  }
};

const user = new Proxy({}, validator);

user.age = 25; // 设置成功
console.log(user.age); // 输出: 25
// user.age = -5; // 抛出错误: Age must be a positive number

3.访问日志记录

使用 Proxy

可以记录对对象属性的所有访问和修改操作。

const logger = {
  get(target, prop) {
    console.log(`Accessing property: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Setting property: ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const user = new Proxy({ name: 'Alice' }, logger);

console.log(user.name); // Accessing property: name
user.age = 30; // Setting property: age to 30

4.模拟私有属性

使用 Object.defineProperty

可以通过闭包和 Object.defineProperty 模拟私有属性。

function createUser(name) {
  let _name = name;

  return {
    get name() {
      return _name;
    },
    set name(newName) {
      console.log(`Changing name from ${_name} to ${newName}`);
      _name = newName;
    }
  };
}

const user = createUser('Alice');
console.log(user.name); // Alice
user.name = 'Bob'; // Changing name from Alice to Bob

这些示例展示了如何使用 Object.defineProperty 和 Proxy 在JavaScript中实现数据绑定、数据验证、访问日志记录以及模拟私有属性等功能。不同场景下的选择通常取决于应用的复杂性和性能要求。

Object.defineProperty 和 Proxy，即响应式编程 的应用场景