十二. Proxy-Reflect

十二. Proxy-Reflect

Proxy-Reflect是es6中一个理解的难点，也是vue2-vue3响应式的原理

12.1. ES6之前的监听对象

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

• 通过之前的属性描述符中的访问器属性描述符来做到；

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

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

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

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

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

 let obj ={
     name:"why",
     age:18
 }
 ​
 Object.keys(obj).forEach(key=>{
     let value= obj[key]
     Object.defineProperty(obj,key,{
         get(){
             console.log(`${key}被访问了`);
             return value
         },
         set(newValue){
             console.log(`${key}被赋值了`);
             value= newValue
         }
     })
 })
 ​
 obj.name="aa"
 console.log(obj.name);
 obj.age=32
 console.log(obj.age);

12.2. Proxy基本使用

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

• 也就是说，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）；
• 之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作；

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

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

  • const p = new Proxy(target, handler)

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

 let obj = {
     name: "why",
     age: 18
 }
 // 如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕捉器（Trap）：
 const objProxy = new Proxy(obj, {
     get(target, key) {
         console.log(`${key}被访问了`);
         return target[key]
     },
     set(target, key, newValue) {
         console.log(`${key}被赋值了`);
         target[key] = newValue
     },
     // 监听in的捕获器
     has(target,key){
         console.log(`${key}-in操作`);
         return key in target
     },
     // 监听delete的捕获器
     deleteProperty(target,key){
         console.log(`${key}-delete操作`);
         delete target[key]
     }
 })
 ​
 objProxy.name = "aa"
 objProxy.name
 'name' in objProxy
 delete objProxy.name

12.3. Proxy所有捕获器(13个)

 - 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 操作符的捕捉器。

apply 和 construct 是用于监听函数的

 function foo(){}
 ​
 const fooProxy= new Proxy(foo, {
     apply(target, thisArg, argArray){
         console.log('监听到了apply调用');
         return target(thisArg,argArray)
     },
     construct(target, argArray, newTarget) {
         console.log('监听到new调用');
         return new target(...argArray)
     }
 })
 fooProxy.apply({},["a","b"])
 new fooProxy("a","b")

12.4. 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文档：developer.mozilla.org/zh-CN/docs/…

12.5. Reflect的常见方法(13个)

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)。

Proxy 和 Reflect 一起使用

 let obj = {
     name: "why",
     age: 18
 }
 ​
 const objProxy = new Proxy(obj, {
     get(target, key) {
         console.log(`${key}被访问了`);
         return Reflect.get(target, key)
     },
     set(target, key, newValue) {
         console.log(`${key}被赋值了`);
         // Reflect.set(target, key, newValue) 会返回一个布尔值，从而可以知道设置属性值是否成功了，但 target[key] = newValue 是无法监听到赋值是否成功的，假如我们使用了  Object.freeze() 冻结了某个对象，则Reflect会返回 false，
         Reflect.set(target, key, newValue)
     }
 })
 ​
 objProxy.name = "aa"
 objProxy.name

12.6. Receiver的作用

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

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

  • receiver其实就是我们创建出来的代理对象

 const obj = {
     _name: "why",
     set name(newValue) {
         console.log(this); // obj对象
         this._name = newValue
     },
     get name() {
         console.log(`obj的get  ${this}`);
         return this._name
     }
 }
 const objProxy = new Proxy(obj, {
     get(target, key, receiver) {
         console.log(`拦截到get捕获器${key}`);
         console.log(objProxy === receiver); // receiver就是代理对象
         return Reflect.get(target, key, receiver)
     },
     set(target, key, newValue, receiver) {
         console.log(`拦截到set捕获器${key}`);
         Reflect.set(target, key, newValue, receiver)
     }
 })
 // objProxy的get捕捉器的返回值没有receiver前提时，objProxy.name访问过程：
 // 1.执行objProxy的get方法 
 // 2.然后通过target, key执行obj的set，
 // 3.然后通过this._name去访问name属性，此时打印this是obj对象。
 // 所以在访问_name时，绕过了objProxy的get方法，直接通过obj_name访问的，拦截操作就失效了，
 // 正常流程应为：对对象的所有操作，都通过代理对象来完成
 // receiver的作用：obj的访问器属性的this改为代理对象，问题就可以解决了
 objProxy.name = "aa"

12.7. Reflect.construct的作用

 function Person(name, age){
     this.name= name
     this.age=age
 }
 function Teacher(){
 ​
 }
 // 需求：执行Person里面的内容，但是创建出来的对象是Teacher实例对象
 const teacher= Reflect.construct(Person,["why",18], Teacher)
 console.log(teacher.__proto__ === Teacher.prototype); // true

12.8. 函数响应式设计

当obj对象的name属性改变时，对应的函数可以自动执行，我们称之为响应式

12.9. vue3的响应式实现步骤

• 将响应式函数和 普通函数分类

 const reactiveFns= new Set()
 function watchFn(fn){
     reactiveFns.add(fn)
 }
 ​
 let obj = {
     name: "why",
     age: 18
 }

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

  • 注：现在是吧obj对象所有属性的依赖函数都放到了一个set里面

 class Depend{
     constructor(){
         reactiveFns:new Set()
     }
     addDepend(fn){
         this.reactiveFns.push(fn)
     }
     notify(){
         this.reactiveFns.forEach(fn => {
             fn()
         });
     }
 } 
 const dep= new Depend
 function watchFn(fn){
     dep.addDepend(fn)
 }

• 监听对象的变化，属性改变了就自动执行对应的函数

  • 注：现在是不管objProxy的哪个属性改变了，都会将需要响应式函数都指向一次

 const objProxy= new Proxy(obj,{
     get(target, key, receive){
         return Reflect.get(target, key, receive)
     },
     set(target, key, newValue, receive){
         Reflect.set(target, key, newValue, receive)
         dep.notify()
     }
 })

• 对象的依赖管理

  • 前面是把所有的对象的属性的响应式函数都收集到一个对象中，
  • 正确思路应该是：每个对象的属性都对应一个Depend实例对象，用来管理对于某属性变化需要监听的响应函数：

• 可以封装getDepend函数专门来管理这种依赖关系：

 const weakmap = new WeakMap()
 ​
 function getDepend(target, key) {
     let map = weakmap.get(target)
     if (!map) {
         map = new Map()
         weakmap.set(target, map)
     }
     let depend = map.get(key)
     if (!depend) {
         depend = new Depend()
 ​
         map.set(key, depend)
     }
     return depend
 }

• 如何知道某属性改变时，哪些对应响应式函数需要执行？

  • 只有响应式函数执行时，在get拦截器里就可以知道了

 let reactiveFn = null
 ​
 function watchFn(fn) {
     reactiveFn = fn
     fn()
     reactiveFn = null 
 }
 ​
 let obj = {
     name: "why",
     age: 18
 }
 ​
 const objProxy = new Proxy(obj, {
     get(target, key, receive) {
         const depend = getDepend(target, key)
         depend.addDepend()
         return Reflect.get(target, key, receive)
     },
     set(target, key, newValue, receive) {
         const depend = getDepend(target, key)
         depend.notify()
         Reflect.set(target, key, newValue, receive)
     }
 })

12.10. vue3的响应式原理

 class Depend {
     constructor() {
         // reactiveFns不能是数组,收集依赖执行响应式函数时
         // 函数里面若使用了一次对象的属性，就会调用一次depend(),
         // 若使用了多次，则会多次执行depend(),响应式函数被重复添加了
         // 使用Set可以去重
         this.reactiveFns = new Set()
     }
     depend() {
         // 注意：一定要加判断,set拦截时，会在执行一次响应式函数，这时候加进来的activeReactiveFn是null
         if (activeReactiveFn) {
             this.reactiveFns.add(activeReactiveFn)
         }
     }
     notify() {
         this.reactiveFns.forEach(fn => {
             fn()
         })
     }
 }
 // 保存当前需要收集的响应式函数
 let activeReactiveFn = null
 // 封装一个响应式的函数
 function watchFn(fn) {
     activeReactiveFn = fn
     fn()
     activeReactiveFn = null
 }
 // 封装一个获取depend对象的管理依赖函数，
 const weakmap = new WeakMap()
 function getDepend(target, key) {
     let map = weakmap.get(target)
     if (!map) {
         map = new Map()
         weakmap.set(target, map)
     }
     let depend = map.get(key)
     if (!depend) {
         depend = new Depend()
         map.set(key, depend)
     }
     return depend
 }
 // 封装receive函数,让每个传进来的对象都时响应式对象
 function receive(obj) {
     return new Proxy(obj, {
         // get主要作用是帮我们收集依赖，执行响应函数时，get会对访问属性做拦截
         get(target, key, receive) {
             // 根据target, key获取对应的depend
             const depend = getDepend(target, key)
             // 给depend对象中添加响应式函数
             depend.depend()
             return Reflect.get(target, key, receive)
         },
         set(target, key, newValue, receive) {
             Reflect.set(target, key, newValue, receive) // 要放在其他执行函数前面
             const depend = getDepend(target, key)
             // 遍历key发生改变需要执行的响应式函数
             depend.notify()
             
         }
     })
 }
 const obj = {
     name: "why", // Depend对象
     age: 18 // Depend对象
 }
 // 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
 const objProxy = receive(obj)
 ​
 watchFn(function () {
     console.log(objProxy.name + " 依赖name的函数1");
     console.log(objProxy.name + " 依赖name的函数2");
 })
 watchFn(function () {
     console.log(objProxy.age + " 依赖age的函数");
 })
 watchFn(function () {
     console.log(`${objProxy.age}-${objProxy.name} ------- 新函数 `);
 })
 ​
 objProxy.name = "aaa"

12.11. vue2的响应式原理

 class Depend {
     constructor() {
         // reactiveFns不能是数组,收集依赖执行响应式函数时
         // 函数里面若使用了一次对象的属性，就会调用一次depend(),
         // 若使用了多次，则会多次执行depend(),响应式函数被重复添加了
         // 使用Set可以去重
         this.reactiveFns = new Set()
     }
     // addDepend(fn) {
     //     this.reactiveFns.add(fn)
     // }
     depend() {
         if (activeReactiveFn) {
             this.reactiveFns.add(activeReactiveFn)
         }
     }
     notify() {
         this.reactiveFns.forEach(fn => {
             fn()
         })
     }
 }
 // 保存当前需要收集的响应式函数
 let activeReactiveFn = null
 // 封装一个响应式的函数
 function watchFn(fn) {
     activeReactiveFn = fn
     fn()
     activeReactiveFn = null
 }
 // 封装一个获取depend对象的函数
 const weakmap = new WeakMap()
 function getDepend(target, key) {
     // 1.根据对象(target)取出对应的Map对象
     let map = weakmap.get(target)
     if (!map) {
         map = new Map()
         weakmap.set(target, map)
     }
   
     // 2.取出具体的dep对象
     let depend = map.get(key)
     if (!depend) {
         depend = new Depend()
         map.set(key, depend)
     }
     return depend
 }
 ​
 function receive(obj) {
     // 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
 }
 const obj = {
     name: "why", // Depend对象
     age: 18 // Depend对象
 }
 // 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
 const objProxy = receive(obj)
 ​
 watchFn(function () {
     console.log(objProxy.name + " 依赖name的函数1");
     console.log(objProxy.name + " 依赖name的函数2");
 })
 watchFn(function () {
     console.log(objProxy.age + " 依赖age的函数");
 })
 watchFn(function () {
     console.log(`${objProxy.age}-${objProxy.name} ------- 新函数 `);
 })
 ​
 objProxy.name = "aaa"