Proxy-Reflect | 青训营笔记

这是我参与「 第五届青训营 」伴学笔记创作活动的第 14 天

Proxy-Reflect ⼀、Proxy基本使⽤

1. ⽤于创建代理 创建⼀个代理对象(Proxy对象), 监听⼀个对象的相关操作, 之后对该对象的所有操 作, 都通过代理对象来完成

2. 案例 ⾸先, 我们需要new Proxy对象, 并且传⼊需要侦听的对象以及⼀个处理对象, 可以 称之为handler 其次, 我们之后的操作都是直接对Proxy的操作, ⽽不是原有的对象, 因为我们需要在 handler⾥⾯进⾏侦听

const obj = {   name: "qwe",   age: 18 } 
const objProxy = new Proxy(obj, {}) 
objProxy.name = "abc"

⼆、Proxy的set和get捕获器 ⼆、Proxy的set和get捕获器

3. set函数有四个参数 target: ⽬标对象(侦听的对象) property: 将被设置的属性key value：新属性值 receiver：调⽤的代理对象

4. get函数有三个参数 target：⽬标对象（侦听的对象） property：被获取的属性key receiver：调⽤的代理对象

const objProxy = new Proxy(obj, {   
  has: function(target, key) {     
 console.log("in 操作符的捕捉器", key)     
 return key in target   
  },   
  set: function(target, key, value) {     
 console.log("属性设置操作的捕捉器", key)     
 target[key] = value   
  },   
  get: function(target, key) {     
 console.log("属性读取操作的捕捉器", key)     
 return target[key]   
  },   
  deleteProperty: function(target, key) {     
 console.log("delete 操作符的捕捉器")     
 delete target[key]
 } 
})

三、Proxy的construct和apply 捕捉器中还有construct和apply，它们应⽤于函数对象

function foo() {   
  console.log("foo函数被调⽤了", this, arguments)   
  return "foo" 
}
const fooProxy = new Proxy(foo, {   
  apply: function(target, thisArg, otherArgs) {     
 console.log("函数的apply侦听")     
 return target.apply(thisArg, otherArgs)   
  },   
  construct(target, argArray, newTarget) {     
 return new target()  
  } 
})

四、Reflect

5. Reflect的作⽤ 它主要提供了很多操作JavaScript对象的⽅法，有点像Object中操作对象的⽅法 ⽐如Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf() ⽐如Reflect.defineProperty(target, propertyKey, attributes)类似于 Object.defineProperty()

6. Reflect的使⽤

7. Reflect的construct

const objProxy = new Proxy(obj, {   
  has: function(target, key) {     
 return Reflect.has(target, key)   
  },   
  set: function(target, key, value, receiver) {     
 return Reflect.set(target, key, value, receiver)   
  },   
  get: function(target, key, receiver) {     
 return Reflect.get(target, key, receiver)   
  },   
  deleteProperty: function(target, key) {     
 return Reflect.deleProperty(target, key)  
  } 
})
function Student(name, age) {   
  this.name = name   
  this.age = age }
function Animal() {}
const stu = Reflect.construct(Student, ["abc", 18], Animal) 
console.log(stu.__proto__ === Animal.prototype) // true