Proxy-Reflect-响应式原理

Zjw
624 阅读10分钟

监听对象的操作

我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程

  • 通过属性描述符中的存储属性描述符来做到

    Object.keys(obj).forEach(key => {

  let value = obj[key]

  Object.defineProperty(obj, key, {

    get: function() {

      console.log(`监听到obj对象的${key}属性被访问了`)
      return value
    },
    set: function(newValue) {
      console.log(`监听到obj对象的${key}属性被设置值`)
      value = newValue
    }
  })
})

但是这样做有什么缺点呢？

  • 首先，Object.defineProperty设计的初衷，不是为了去监听截止一个对象中所有的属性的。

    • 我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强行将它变成了数据属性描述符。

  • 其次，如果我们想监听更加丰富的操作，比如新增属性、删除属性，那么 Object.defineProperty是无能为力的

  • 所以我们要知道，存储数据描述符设计的初衷并不是为了去监听一个完整的对象

Proxy基本使用

  • 在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的

    • 也就是说，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）

    • 之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作

  • 我们可以将上面的案例用Proxy来实现一次

    • 首先，我们需要new Proxy对象，并且传入需要侦听的对象以及一个处理对象，可以称之为handler

    • const p = new Proxy(target, handler)

  • 其次，我们之后的操作都是直接对Proxy的操作，而不是原有的对象，因为我们需要在handler里面进行侦听

     const objProxy = new Proxy(obj, {
      // 获取值时的捕获器
      get: function(target, key) {
          console.log(`监听到对象的${key}属性被访问了`, target)
          return target[key]
      },
​      // 设置值时的捕获器
      set: function(target, key, newValue) {
          console.log(`监听到对象的${key}属性被设置值`, target)
          target[key] = newValue
      }
  })

  • 如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕捉器（Trap）：

  • set和get分别对应的是函数类型

    • set函数有四个参数

    • target：目标对象（侦听的对象）

    • property：将被设置的属性key

    • value：新属性值

    • receiver：调用的代理对象

  • get函数有三个参数

    • target：目标对象（侦听的对象）

    • property：被获取的属性key

    • receiver：调用的代理对象

          const objProxy = new Proxy(obj, {
          get: function(target, key) {
              console.log(`监听到对象的${key}属性被访问了`, target)
              return target[key]
          },​
          set: function(target, key, newValue) {
              console.log(`监听到对象的${key}属性被设置值`, target)
              target[key] = newValue
          },​ 
          has: function(target, key) {
              console.log(`监听到对象的${key}属性in操作`, target)
              return key in target
          },​ 
          deleteProperty: function(target, key) {
              console.log(`监听到对象的${key}属性in操作`, target)
              delete target[key]
          }
      })

Proxy所有捕获器

  • handler.getPrototypeOf()

    • Object.getPrototypeOf 方法的捕捉器。

  • handler.setPrototypeOf()

    • Object.setPrototypeOf 方法的捕捉器。

  • handler.isExtensible()

    • Object.isExtensible 方法的捕捉器。

  • handler.preventExtensions()

    • Object.preventExtensions 方法的捕捉器。

  • handler.getOwnPropertyDescriptor()

    • Object.getOwnPropertyDescriptor 方法的捕捉器。

  • handler.defineProperty()

    • Object.defineProperty 方法的捕捉器。

  • handler.ownKeys()

    • Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器

  • handler.has()

    • in 操作符的捕捉器

  • handler.get()

    • 属性读取操作的捕捉器

  • handler.set()

    • 属性设置操作的捕捉器

  • handler.deleteProperty()

    • delete 操作符的捕捉器

  • handler.apply()

    • 函数调用操作的捕捉器

  • handler.construct()

    • new 操作符的捕捉器

      function foo() {​}​
    const fooProxy = new Proxy(foo, {
    apply: function(target, thisArg, argArray) {
    console.log("对foo函数进行了apply调用")
    return target.apply(thisArg, argArray)
  },
  construct: function(target, argArray, newTarget) {
    console.log("对foo函数进行了new调用")
    return new target(...argArray)
  }})​
fooProxy.apply({}, ["abc", "cba"])
new fooProxy("abc", "cba")

Reflect的作用

Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射

  • 那么这个Reflect有什么用呢

    • 它主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法

    • 比如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf()

    • 比如Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty()

  • 如果我们有Object可以做这些操作，那么为什么还需要有Reflect这样的新增对象呢

    • 这是因为在早期的ECMA规范中没有考虑到这种对 对象本身 的操作如何设计会更加规范，所以将这些API放到了Object上面

    • 但是Object作为一个构造函数，这些操作实际上放到它身上并不合适

    • 另外还包含一些类似于 in、delete操作符，让JS看起来是会有一些奇怪的

    • 所以在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上

  • 那么Object和Reflect对象之间的API关系，可以参考MDN文档:

Reflect中有哪些常见的方法呢？它和Proxy是一一对应的，也是13个：

  • Reflect.getPrototypeOf(target)

    • 类似于 Object.getPrototypeOf()

  • Reflect.setPrototypeOf(target, prototype)

    • 设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true

  • Reflect.isExtensible(target)

    • 类似于 Object.isExtensible()

  • Reflect.preventExtensions(target)

    • 类似于 Object.preventExtensions()。返回一个Boolean

  • Reflect.getOwnPropertyDescriptor(target, propertyKey)

    • 类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符, 否则返回 undefined

  • Reflect.defineProperty(target, propertyKey, attributes)

    • 和 Object.defineProperty() 类似。如果设置成功就会返回 true

  • Reflect.ownKeys(target)

    • 返回一个包含所有自身属性（不包含继承属性）的数组。(类似于 Object.keys(), 但不会受enumerable影响)

  • Reflect.has(target, propertyKey)

    • 判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同

  • Reflect.get(target, propertyKey[, receiver])

    • 获取对象身上某个属性的值，类似于 target[name]

  • Reflect.set(target, propertyKey, value[, receiver])

    • 将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true

  • Reflect.deleteProperty(target, propertyKey)

    • 作为函数的delete操作符，相当于执行 delete target[name]

  • Reflect.apply(target, thisArgument, argumentsList)

    • 对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和 Function.prototype.apply() 功能类似

  • Reflect.construct(target, argumentsList[, newTarget])

    • 对构造函数进行 new 操作，相当于执行 new target(...args)

          const obj = {
        name: "abc",
        age: 18
    }
    const objProxy = new Proxy(obj, {
        get: function(target, key, receiver) {
            console.log("get---------")
            return Reflect.get(target, key)
        },
        set: function(target, key, newValue, receiver) {
            console.log("set---------")
            target[key] = newValue​
            const result = Reflect.set(target, key, newValue)
            if (result) {
            } else {
            }
        }
    })​
    objProxy.name = "kobe"
    console.log(objProxy.name)

我们发现在使用getter、setter的时候有一个receiver的参数，它的作用是什么呢？

  • 如果我们的源对象（obj）有setter、getter的访问器属性，那么可以通过receiver来改变里面的this

      const obj = {
      _name: "abc",
      get name() {
          return this._name
      },
      set name(newValue) {
          this._name = newValue
      }
  }​
  const objProxy = new Proxy(obj, {
      get: function(target, key, receiver) {
          // receiver是创建出来的代理对象
          console.log("get方法被访问--------", key, receiver)
          console.log(receiver === objProxy)
          return Reflect.get(target, key, receiver)
      },
      set: function(target, key, newValue, receiver) { 
         console.log("set方法被访问--------", key)
          Reflect.set(target, key, newValue, receiver)
      }
  })
​  // console.log(objProxy.name)
  objProxy.name = "kobe"

Reflect的construct

    function Student(name, age) {
        this.name = name
        this.age = age
    }​
    function Teacher() {​    }​
    // const stu = new Student("aaa", 18)
    // console.log(stu)
    // console.log(stu.__proto__ === Student.prototype)
​    // 执行Student函数中的内容, 但是创建出来对象是Teacher对象
    const teacher = Reflect.construct(Student, ["aaa", 18], Teacher)
    console.log(teacher)
    console.log(teacher.__proto__ === Teacher.prototype)

什么是响应式

我们先来看一下响应式意味着什么？我们来看一段代码

 let m = 100​ 
// 一段代码 console.log(m)
 console.log(m * 2)
 console.log(m ** 2)
 console.log("Hello World")​

m = 200

  • m有一个初始化的值，有一段代码使用了这个值

  • 那么在m有一个新的值时，这段代码可以自动重新执行

这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式的

对象的响应式

const obj = {
  name: "aaa",
  age: 18}
​const newName = obj.name
console.log("Hello World")
console.log(obj.name) // 100行
​obj.name = "kobe"

响应式函数设计

  • 首先，执行的代码中可能不止一行代码，所以我们可以将这些代码放到一个函数中

    • 那么我们的问题就变成了，当数据发生变化时，自动去执行某一个函数

  • 但是有一个问题：在开发中我们是有很多的函数的，我们如何区分一个函数需要响应式，还是不需要响应式呢

响应式函数的实现watchFn

  • 凡是传入到watchFn的函数，就是需要响应式的

  • 其他默认定义的函数都是不需要响应式的

    let reactiveFns = []
function watchFn(fn) {
  reactiveFns.push(fn)
}// 对象的响应式
const obj = {
  name: "aaa",
  age: 18}
watchFn(function() {
  const newName = obj.name
  console.log("Hello World")
  console.log(obj.name) // 100行
})​
watchFn(function() {
  console.log(obj.name,
 "demo function -------")})​
function bar() {
  console.log("普通的其他函数")
  console.log("这个函数不需要有任何响应式"
)}​
obj.name = "kobe"
reactiveFns.forEach(fn => {  fn()})

响应式依赖的收集

  • 目前我们收集的依赖是放到一个数组中来保存的，但是这里会存在数据管理的问题

    • 我们在实际开发中需要监听很多对象的响应式

    • 这些对象需要监听的不只是一个属性，它们很多属性的变化，都会有对应的响应式函数

    • 我们不可能在全局维护一大堆的数组来保存这些响应函数

  • 所以我们要设计一个类，这个类用于管理某一个对象的某一个属性的所有响应式函数

    • 相当于替代了原来的简单 reactiveFns 的数组

            class Depend {
       constructor() { 
       this.reactiveFns = []
      }​
      addDepend(reactiveFn) { 
       this.reactiveFns.push(reactiveFn)
      }​
      notify() { 
       this.reactiveFns.forEach(fn => { 
         fn()
        })
      } 
   }​
    const depend = new Depend()
    function watchFn(fn) { 
     depend.addDepend(fn) 
   }

监听对象的变化

  • 那么我们接下来就可以通过之前学习的方式来监听对象的变量

    • 方式一：通过 Object.defineProperty的方式（vue2采用的方式）；

    • 方式二：通过new Proxy的方式（vue3采用的方式）；

  • 先以Proxy的方式来监听

      const objProxy = new Proxy(obj, {
    get: function(target, key, receiver) {
      return Reflect.get(target, key, receiver)
    },
    set: function(target, key, newValue, receiver) {
      Reflect.set(target, key, newValue, receiver)
      depend.notify()
    }
  })

对象的依赖管理

  • 我们目前是创建了一个Depend对象，用来管理对于name变化需要监听的响应函数

    • 但是实际开发中我们会有不同的对象，另外会有不同的属性需要管理

对象依赖管理的实现

我们可以写一个getDepend函数专门来管理这种依赖关系

// 封装一个获取depend函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }​
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend}
​​// 监听对象的属性变量: Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    // depend.notify()
    const depend = getDepend(target, key)
    depend.notify()
  }})

正确的依赖收集

  • 我们之前收集依赖的地方是在 watchFn 中

    • 但是这种收集依赖的方式我们根本不知道是哪一个key的哪一个depend需要收集依赖

    • 你只能针对一个单独的depend对象来添加你的依赖对象

  • 那么正确的应该是在哪里收集呢？应该在我们调用了Proxy的get捕获器时

    • 因为如果一个函数中使用了某个对象的key，那么它应该被收集依赖

      // 封装一个响应式的函数
let activeReactiveFn = null
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}​​
// 监听对象的属性变量: Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    // 根据target.key获取对应的depend
    const depend = getDepend(target, key)
    // 给depend对象中添加响应函数
    depend.addDepend(activeReactiveFn)

    ​ return Reflect.get(target, key, receiver) }, set: function(target, key, newValue, receiver) { Reflect.set(target, key, newValue, receiver) // depend.notify() const depend = getDepend(target, key) depend.notify() }})

对Depend重构

  • 但是这里有两个问题

    • 问题一：如果函数中有用到两次key，比如name，那么这个函数会被收集两次

    • 问题二：我们并不希望将添加reactiveFn放到get中，以为它是属于Dep的行为

  • 所以我们需要对Depend类进行重构

    • 解决问题一的方法：不使用数组，而是使用Set

    • 解决问题二的方法：添加一个新的方法，用于收集依赖

        class Depend {
    constructor() {
      this.reactiveFns = new Set()
    }​
    // addDepend(reactiveFn) {
    //   this.reactiveFns.add(reactiveFn)
    // }

    ​ depend() { if (activeReactiveFn) { this.reactiveFns.add(activeReactiveFn) } }​ notify() { this.reactiveFns.forEach(fn => { fn() }) } }

创建响应式对象

我们目前的响应式是针对于obj一个对象的，我们可以创建出来一个函数，针对所有的对象都可以变成响应式对象：

function reactive(obj) {
  return new Proxy(obj, {
    get: function(target, key, receiver) {
      // 根据target.key获取对应的depend
      const depend = getDepend(target, key)
      // 给depend对象中添加响应函数
      // depend.addDepend(activeReactiveFn)
      depend.depend()
        return Reflect.get(target, key, receiver)
    },
    set: function(target, key, newValue, receiver) {
      Reflect.set(target, key, newValue, receiver)
      // depend.notify()
      const depend = getDepend(target, key)
      depend.notify()
    }
  })
}

Vue2响应式原理

Vue2中通过我们前面学习过的Object.defineProerty的方式来实现对象属性的监听

function reactive(obj) {
  // {name: "aaa", age: 18}
  // ES6之前, 使用Object.defineProperty
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get: function() {
        const depend = getDepend(obj, key)
        depend.depend()
        return value
      },
      set: function(newValue) {
        value = newValue
        const depend = getDepend(obj, key)
        depend.notify()
      }
    })
  })
  return obj
}
avatar
文章
阅读
粉丝