JavaScript之Object.defineProperty() 数据代理和数据劫持

数据代理和数据劫持

通过使用 Object.defineProperty，我们可以实现数据代理和数据劫持的功能。通过拦截对象属性的访问和修改，我们可以在发生变化时执行一些额外的操作，例如日志记录、数据验证等。

数据代理：

• 作用：通过拦截对象属性的访问和修改，对其进行自定义操作。代理对象可以在属性被访问或设置时执行额外的逻辑，例如记录日志、验证数据、触发其他操作等。
• 实现方式：常用的实现方式是使用 Proxy 对象或 Object.defineProperty 方法来创建代理对象，并通过定义 get 和 set 方法来拦截属性的访问和设置。

数据劫持：

• 作用：数据劫持允许我们在对象属性发生变化时执行一些额外的操作。通过监听属性的变化，我们可以在数据被修改时触发回调函数，从而实现数据响应式、数据绑定等功能。
• 实现方式：常用的实现方式是使用 Object.defineProperty 方法或一些类似的库（如 Vue.js 的响应式系统）来定义属性的 get 和 set 方法，并在这些方法中执行相应的操作。

区别：

1. 目的：数据代理的主要目的是对属性访问和修改进行拦截，并在拦截点上执行自定义操作；数据劫持的主要目的是监听属性的变化，并在变化发生时执行一些额外的操作。
2. 使用方式：数据代理通常通过创建代理对象来实现，可以使用 Proxy 对象或 Object.defineProperty 方法；数据劫持通常通过监听属性的变化来实现，可以使用 Object.defineProperty 方法或类似的库。
3. 应用场景：数据代理常用于实现数据验证、日志记录、权限控制等功能；数据劫持常用于实现数据响应式、数据绑定、触发视图更新等功能。

总结： 数据代理和数据劫持是 JavaScript 中常用的技术，它们在对象属性的操作和监听上起到了不同的作用。数据代理主要用于拦截属性的访问和修改，并执行自定义操作，而数据劫持主要用于监听属性的变化，并在变化发生时执行一些额外的操作。根据具体需求，选择适合的技术可以提高代码的可维护性和灵活性。

实现类似Vue的  数据代理 和数据劫持

class Vue {
  constructor(options) {
    this.$options = options
    this.initData()
  }
  initData() {
    let data = this._data = this.$options.data
    let keys = Object.keys(data)
    for (let i = 0; i < keys.length; i++) {
      Object.defineProperty(this,keys[i],{
        enumerable:true,
        configurable:true,
        get:function proxyGetter() {
          return this._data[keys[i]]
        },
        set:function proxySetter(value) {
          this._data[keys[i]] = value
        }
      })
    }


    for (let i = 0; i < keys.length; i++) {
      let value = data[keys[i]]
      Object.defineProperty(data,keys[i],{
        enumerable:true,
        configurable:true,
        get:function reactiveGetter() {
          console.log(`获取data的${keys[i]}值`);
          return value
        },
        set:function reactiveSetter(val) {
          console.log(`data的${keys[i]}发生了改变`);
          value = val
        }
      })
    }

  }
}