六、Proxy和Reflect的深入学习

1、监听对象的操作 - 引出Proxy类

• 我们先来看一个需求：有一个对象，我们希望监听这个对象中的属性被设置或获取的过程
  • 通过我们前面所学的知识，能不能做到这一点呢？
  • 其实是可以的，我们可以通过之前的属性描述符中的存储属性描述符来做到；
• 下面这段代码就利用了前面讲过的 Object.defineProperty 的存储属性描述符来对属性的操作进行监听。

const obj = {
  name: 'kobe',
  age: 38,
  height: 1.98
}

Object.keys(obj).forEach(key => {
  let _value = obj[key]
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    set(value) {
      console.log('你正在设置obj的', key, '属性')
      _value = value
    },
    get() {
      console.log('你正在获取obj的', key, '属性')
      return _value
    }
  })
})

obj.age = 100
console.log(obj.age)

obj.name = 'james'
console.log(obj.name)

obj.height = 2.06
console.log(obj.height)

console.log(obj)//{ name: 'james', age: 100, height: 2.06 }

• 但是这样做有什么缺点呢？
  • 首先，Object.defineProperty设计的初衷，不是为了去监听截止一个对象中所有的属性的。
    • 我们在定义某些属性的时候，初衷其实是定义普通的属性，但是后面我们强行将它变成了数据属性描述符。
  • 其次，如果我们想监听更加丰富的操作，比如新增属性、删除属性，那么Object.defineProperty是无能为力的。（需要用到Proxy类来完成）
• 所以我们要知道，存储数据描述符设计的初衷并不是为了去监听一个完整的对象。

2、Proxy类的深入学习

2.1.Proxy基本使用

• 在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：
  • 也就是说，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）；
  • 之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作；
• 我们可以将上面的案例用Proxy来实现一次：
  • 首先，我们需要new Proxy对象，并且传入需要侦听的对象target ； 以及一个处理对象handle可以称之为handler；const p = new Proxy(target, handler)
  • 其次，我们之后的操作都是直接对Proxy的操作，而不是原有的对象，因为我们需要在handler里面进行侦听；
• MDN学习Proxy类 (opens new window)

const obj = {
  name: 'kobe',
  age: 38,
  height: 1.98
}

const objProxy = new Proxy(obj,{
  //处理对象
})

2.2.Proxy的set和get捕获器

• 如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕捉器（Trap）：
• set和get分别对应的是函数类型；
• set函数有四个参数：
  • target：目标对象（侦听的对象）；---> set函数内部拿到的target其实就是new Proxy()时第一个参数传入的（侦听的对象）
  • property：将被设置的属性key；
  • value：新属性值；
  • receiver：调用的代理对象；---> set函数内部拿到的receiver,就是new Proxy()出来的代理对象【具体该参数的作用：我们会在下面学习Reflect对象的时候进行说明 -> 3.4.receiver参数的作用有讲】
• get函数有三个参数：
  • target：目标对象（侦听的对象）；
  • property：被获取的属性key；
  • receiver：调用的代理对象；

const obj = {
  name: 'kobe',
  age: 38,
  height: 1.98
}

const objProxy = new Proxy(obj,{
  set(target,key,value,receiver) {
    console.log(target === obj) //true
    console.log(receiver === objProxy) //true
    console.log('set捕获器',key)
    target[key] = value //--> 这里的target其实就是new Proxy()时第一个参数传入的（侦听的对象）：这里就是obj
  },
  get(target,key,receiver) {
    console.log('get捕获器',key)
    return target[key]
  }
})

console.log(objProxy)//{ name: 'kobe', age: 38, height: 1.98 }

objProxy.age = 100
console.log(objProxy.age)

objProxy.name = 'james'
console.log(objProxy.name)

objProxy.height = 2.06
console.log(objProxy.height)

console.log(obj)//{ name: 'james', age: 100, height: 2.06 }

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

//handler.has()和 handler.deleteProperty()捕获器
const obj = {
  name: 'kobe',
  age: 38,
  height: 1.98
}

const objProxy = new Proxy(obj,{
  deleteProperty(target,key) {
    console.log('delete捕获器',key)
    delete target[key]
  },
  has(target,key) {
    console.log("has捕获器",key)
    return key in target
  }
})

delete objProxy.name
console.log(obj)
console.log('height' in objProxy)

2.4.Proxy的construct和apply

• 当然，我们还会看到捕捉器中还有construct和apply，它们是应用于函数对象的：

function foo(...args) {
  console.log('foo函数调用了',this,args)
  return 'foo'
}

const fooProxy = new Proxy(foo, {
  apply(target,thisArg,otherArgs) {
    console.log('函数的apply侦听')
    return target.apply(thisArg,otherArgs)
  },
  construct(target,argArray,newTarget) {
    console.log('函数的new侦听,即创建实例对象侦听',target,argArray,newTarget)
    return new target(...argArray)
  }
})

fooProxy.apply({name:'kobe'},['nba','cba'])//foo函数调用了 { name: 'kobe' } [ 'nba', 'cba' ]

new fooProxy('kobe','james')//foo函数调用了 foo {} [ 'kobe', 'james' ]

3、Reflect内置类深入学习

3.1.Reflect对象的作用

• Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。Reflect内置对象MDN语法学习 (opens new window)
• 那么这个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对象上；
  • 另外在使用Proxy时，可以做到不操作原对象；
• 那么Object和Reflect对象之间的API关系，可以参考MDN文档：Object和Reflect对象之间的API关系 (opens new window)

//区别:Reflect有的操作对象后能拿到返回值：如：obj[key]=value操作 即Reflect.set(obj,key,value)
const obj = {
  name:'kobe',
  height:1.98
}
Object.defineProperty(obj,'age',{
  enumerable:true,
  configurable:true,
  writable:false,//不可写
  value:39
})

console.log(Reflect.set(obj,'name','james'))//true -> 设置成功
console.log(Reflect.set(obj,'age','99'))//false -> 设置失败

//下面这种写法不管你成功还是失败，都返回你设置的那个值；其实这里的age属性值是设置失败的，但是我们不能根据返回值来直观的判断它是否设置成功
console.log(obj['height'] = 2.06)//2.06
console.log(obj['age'] = 99)//99

console.log(obj)//{ name: 'james', height: 2.06, age: 39 }
//另外的区别：参考上面的mdn文档吧

3.2.Reflect的常见方法

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

let value = 'kobe'

const obj = {
  name:'kobe',
  age:39,
  set name(newValue) {
    console.log('设置name属性值',this === obj)//这里的this就是obj本身
    value = newValue
  },
  get name(){
    console.log('获取name属性值',this === obj)//这里的this就是obj本身
    return value
  }
}

Object.defineProperty(obj,'height',{
  enumerable:true,
  configurable:false,//不可删除
  writable:true,
  value:1.98
})
Object.defineProperty(obj,'address',{
  enumerable:true,
  configurable:true,
  writable:false,//不可写
  value:'洛杉矶'
})

const objProxy = new Proxy(obj,{
  get(target,key,receiver) {
    // return target[key]
    console.log(`代理获取${key}属性值`)
    return Reflect.get(target,key)
  },
  
  set(target,key,value,receiver) {
    // value = target[key]
    // 1.好处一: 代理对象的目的: 不再直接操作原对象
    // 2.好处二: Reflect.set方法有返回Boolean值, 可以判断本次操作是否成功
    console.log(`代理设置${key}属性值`)
    const isSuccess = Reflect.set(target,key,value)// -> 设置成功会有返回值为：true； 反之为：false
    if(!isSuccess) throw new Error(`设置属性${key}失败`) //拿到返回值进行判断
  },
  
  has(target,key) {
    console.log(`代理判断${key}属性是否在${target}对象中`)
    return Reflect.has(target,key)
  },
  
  deleteProperty(target,key) {
    const isSuccess = Reflect.deleteProperty(target,key)
    if(!isSuccess) throw new Error(`删除属性${key}失败`)//拿到返回值进行判断
    console.log(`代理删除${key}属性`)
  }
})
//1.delete操作
delete objProxy.age
// delete objProxy.height // -> height属性是不可配置的属性，即不可删除属性

//2.set操作
objProxy.name = 'james'
// objProxy.address = '中国'// -> address属性是不可写属性

//3.get操作
console.log(objProxy.name)

//4.has操作
console.log('age' in objProxy)

3.3.Reflect的使用

• 那么我们可以将之前Proxy案例中对原对象的操作，都修改为Reflect来操作：

let _value = 'kobe'

const obj = {
  name:'kobe',
  set name(value) {
    console.log('设置name属性值')
    _value = value
  },
  get name(){
    console.log('获取name属性值')
    return _value
  }
}

const objProxy = new Proxy(obj,{
  get(target,key) {
    // return target[key]
    return Reflect.get(target,key)
  },
  set(target,key,value) {
    // value = target[key]
    Reflect.set(target,key,value)
  }
})

objProxy.name = 'james'
console.log(objProxy.name)

3.4.Reflect的类方法中：Receiver参数的作用

• 我们发现在使用getter、setter的时候有一个receiver的参数，它的作用是什么呢？
  • 如果我们的源对象（obj）有setter、getter的访问器属性，那么可以通过receiver来改变里面的this；
• 我们来看这样的一个对象的相关案例进行理解
• 不用Receiver参数的情况

let deafault_name = 'kobe'
const obj = {
  _name:'kobe',
  set name(newValue) {
    console.log('obj对象内部设置name属性值',this === obj,this === objProxy)//这里的this就是obj本身
    this._name = newValue
  },
  get name(){
    console.log('obj对象内部获取name属性值',this === obj,this === objProxy)//这里的this就是obj本身
    return this._name
  },

  set _name(newValue) {
    console.log('obj对象内部设置_name属性值',this === obj,this === objProxy)//这里的this就是obj本身
    deafault_name = newValue
  },
  get _name() {
    console.log('obj对象内部获取_name属性值',this === obj,this === objProxy)//这里的this就是obj本身
    return deafault_name
  }

}

const objProxy = new Proxy(obj,{
  get(target,key,receiver) {
    console.log(`代理获取${key}属性值`)
    return Reflect.get(target,key)//不用receiver参数
  },
  set(target,key,value,receiver) {
    console.log(`代理设置${key}属性值`)
    Reflect.set(target,key,value)//不用receiver参数
  },
})

objProxy.name = 'james'
/**打印内容如下：
 * 代理设置name属性值
 * obj对象内部设置name属性值 true false
 * obj对象内部设置_name属性值 true false
 */

//我们通过打印会发现：
//1.obj对象内部的set/get方法中this是指向obj本身的 (下面以obj内部set方法为例：)
//2.我们会发现：obj对象内部 set name方法中 有如右操作： （this._name = newValue 即  obj._name = 'james'） 相当于又设置了obj的_name属性值为james;
//3.通过上面打印发现；设置obj._name = 'james’的操作； 是没有被代理对象的set方法捕获器捕获到的； 而是直接通过原对象的set _name方法进行直接设置
//4.如果我们的需求是：在obj内部的set/get方法中 所有设置或者获取相关obj属性的操作 也能够被代理对象的相关捕获器捕获到 从而进行相关设置和获取操作，应该怎么办呢？
//5.经过思考：我们发现只要让obj内部的set/get方法中的this指向代理对象即可；这个时候我们就需要用到receiver这个参数了

• 用Receiver参数的情况

let deafault_name = 'kobe'
const obj = {
  _name:'kobe',
  set name(newValue) {
    console.log('obj对象内部设置name属性值',this === obj,this === objProxy)//这里的this是代理对象objProxy
    this._name = newValue
  },
  get name(){
    console.log('obj对象内部获取name属性值',this === obj,this === objProxy)//这里的this是代理对象objProxy
    return this._name
  },

  set _name(newValue) {
    console.log('obj对象内部设置_name属性值',this === obj,this === objProxy)//这里的this是代理对象objProxy
    deafault_name = newValue
  },
  get _name() {
    console.log('obj对象内部获取_name属性值',this === obj,this === objProxy)//这里的this是代理对象objProxy
    return deafault_name
  }

}

const objProxy = new Proxy(obj,{
  get(target,key,receiver) {
    console.log(`代理获取${key}属性值`)
    return Reflect.get(target,key,receiver)//用上了receiver参数
  },
  set(target,key,value,receiver) {
    console.log(`代理设置${key}属性值`)
    Reflect.set(target,key,value,receiver)//用上了receiver参数
  },
})

objProxy.name = 'james'
/**打印内容如下：
 * 代理设置name属性值
 * obj对象内部设置name属性值 false true
 * 代理设置_name属性值
 * obj对象内部设置_name属性值 false true
 */

3.5.Reflect的construct

function Person(name,age) {
  this.name = name,
  this.age = age
}
Person.prototype.running = function() {
  console.log(this.name,'running')
}

function Student(){}

const stu = Reflect.construct(Person,['kobe',39],Student)//相当于借用Person类创建一个对象，然后将该对象变成Studentd的实例对象
console.log(stu.__proto__ === Student.prototype)//true
console.log(Student.prototype.__proto__ === Person.prototype)//false   没有实现继承
// stu.running()//报错

//1. const stu1 = Reflect.construct(Person,['kobe',39],Student) 相当于如下操作
const stu1 = new Person('kobe',39)
// stu1.running()//kobe running
Object.setPrototypeOf(stu1,Student.prototype)//stu1就变成了Student构造函数的实例对象了
// stu1.running()//报错