9.Proxy-Reflect

Proxy

1. 监听对象的操作

   vue2中响应式原理的核心代码(ES5之前)

   const obj = {
       name: "beichen",
       age: 22,
       height: 1.75
   }
   for (const key in obj) {
       let value = obj[key]
       // 存取属性描述符
       Object.defineProperty(obj, key, {
           set(newValue) {
               console.log(`监听: ${key}属性的改变: ${newValue}`)
               value = newValue
           },
           get() {
               console.log(`监听: 获取${key}属性的值`)
               return value
           }
       })
   }
   console.log(obj.name)
   obj.name = "haixia"

   缺点：

   • Object.defineProperty设计初衷不是为了监听对象中的某个属性。
   • 我们在定义某些属性的时候，初衷是定义一个普通的属性，但是后面我们强行把它变成了数据属性描述符。
   • 如果我们想要监听更加更富的操作，比如，添加/删除属性，那么Object.defineProperty是做不到的。

     proxy的set/get(捕获器)

• get

  get() {}有三个参数

  • target：被监听的对象(此处的obj)
  • property：被获取属性的key
  • receiver：被调用的代理对象(objProxy)

• set

  set() {}有四个参数

  • target：被监听的对象(此处的obj)
  • property：将要设置属性的key
  • value：新属性值
  • receiver：被调用的代理对象(objProxy)

const obj = {
    name: "haixia",
    age: 24,
    height: 1.58
}
const objProxy = new Proxy(obj, {
    set(target, key, newValue, proxyObject) {
        console.log(`监听：${key}被设置为${newValue}`)
        target[key] = newValue
    },
    get(target, key, proxyObject) {
        console.log(`监听：${key}被获取`)
        return target[key]
    }
})
objProxy.name = "beichen"
console.log(objProxy.age)
objProxy.address = "江西九江"

**tips:**对obj的操作是不会被监听到的，在代理对象中设置新的属性值也是没问题的。如果我们不去重写get/set方法，也是可以完成响应式的获取和设置，但是当我们重写get/set之后，我们需要额外的做一些操作，就需要我们自己完成对应的事情，比如get返回对应的值，set设置新的值等。

其他捕获器的监听方法

1. deleteProperty（删除）

2. has（key in tartget）

   function foo(num1, num2) {
       console.log(this, num1, num2)
   }
   const fooProxy = new Proxy(foo, {
       apply(target, thisArg, otherArgs) {
           console.log("监听了apply操作")
           target.apply(thisArg, otherArgs)
       },
       construct(target, argArray, newTarget) {
           console.log("---" + target, argArray, newTarget)
           return new target(...argArray)
       }
   })
   fooProxy.apply("abc", ['111', '222'])
   new fooProxy('111', '222')

3. apply（foo.apply()）

4. construct（new fooProxy()）

Reflect

Reflect和Proxy共同完成

好处:

• 转而间接的去操作对象，这也是代理对象的目的
• Reflect的捕获器和Proxy是一一对应的，且有返回值，对于代码的角度来说更加的严谨
• 好处三:
  • receiver就是外层的Proxy对象
  • Reflect.set/get的最后一个参数可以决定对象访问器中的setter/getter中的this指向

const obj = {
    _name: "beichen",
    set name(value) {
        console.log(this) // 默认是obj
        this._name = value
    },
    get name() {
        return this._name
    }
}
const objProxy = new Proxy(obj, {
    set(target, key, newValue, receiver) {
        // 不要直接操作原对象，也就是不要直接操作target(obj)
        // 转而间接的去操作对象，这也是代理对象的目的
        // Reflect的捕获器和Proxy是一一对应的，且有返回值，对于代码的角度来说更加的严谨
        // Reflect.set(target, key, newValue)
        if (Reflect.set(target, key, newValue, receiver)) {
            console.log(`修改${key}成功，值为${newValue}`)
        } else {
            throw new Error(`修改${key}失败`)
        }
    },
    get(target, key, receiver) {
        const value = Reflect.get(target, key, receiver)
        if (value) {
            console.log(`获取${key}的值成功`)
            return value
        } else {
            throw new Error(`获取${key}的值失败`)
        }
        return
    }
})
objProxy.name = 'haixia'
console.log(objProxy.name)

reflect结合construct的使用：

function Person(name, age) {
    this.name = name
    this.age = age
}
function Student() {
    // 在ES5中就有这样的代码，如果浏览器支持Reflect可以这样做，但是如果不支持，我们也可以用call/apply的方式来写
    Person.call(this, "haixia", 24)
}
// 这里含义是借用Person的构造函数，传入["beichen", 18]的参数，创建一个Student的对象的实例
const stu = Reflect.construct(Person, ["beichen", 18], Student)

const stu2 = new Student()
console.log(stu2)

console.log(stu) // Student
console.log(stu.__proto__ === Student.prototype) // true
console.log(stu instanceof Student) // true