js语法---理解反射Reflect对象和代理Proxy对象

Reflect

基本要点

        反射：reflect是一个内置的全局对象，它的作用就是提供了一些对象实例的拦截方法，它的用法和Math对象相似，都只有静态方法和属性，同时reflect也没有构造器，无法通过new运算符构建实例对象（无实例的全局对象）；也就是说reflect相当于一个工具类，只对外提供方法进行使用。

tips 拦截方法：拦截方法是指，通过自身方法去覆盖掉原有的默认方法，这样就只会生效拦截方法的操作，而不执行默认操作（例如，setter的作用，覆盖了原有的赋值操作），

这里使用了reflect的方法就不需要再使用默认的方法了

运用示例

以下使用几个简单的reflect的对比示例

Reflect.ownKeys()

获取对象的所有属性（不限于字符串），返回一个数组 ,作用类似Object.keys

Reflect.ownKeys(target)

target：获取自身属性键的目标对象。

let obj ={
  content: 'hello world',
  length: 11,
  char: 'utf-8'
}

let Keys = Object.keys(obj) // 返回一个由属性名组成的数组
console.log(Keys); // ['content', 'length', 'char']

let keys = Reflect.ownKeys(obj) // 返回一个由属性名组成的数组
console.log(keys); // ['content', 'length', 'char']

         这两个方法的效果一致都能拿到对象所有的属性名，但是Object.keys只能得到对象属性的字符串值，如果一个对象的属性包含symbol类型，就无法将其正确的识别出来，而Reflect.ownKeys就可以做到。

关于symbol类型可以参考：js基本类型---symbol标识符_js symbol属于什么类型-CSDN博客

 

Reflect.has()

判定对象中是否存在某个属性，与 in 操作符 相同，返回Boolean值。

let isChar = Reflect.has(obj, 'char') // 判断属性是否存在
console.log(isChar); // true

 Reflect.get()

返回对象（数组）中指定属性的值

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

// target 需要取值的目标对象

// propertyKey 需要获取的值的键值

// receiver 如果target对象中指定了getter，receiver则为getter调用时的this值。

let content = Reflect.get(obj, 'content') // 获取属性值
console.log(content); // hello world

 

Reflect.set()

静态方法 Reflect.set() 在一个对象上设置一个属性的值,返回Boolean值

Reflect.set(target, propertyKey, value)
Reflect.set(target, propertyKey, value, receiver)

//target 设置属性的目标对象。

//propertyKey 设置的属性的名称。

//value 设置的值。

// receiver 如果遇到 setter，receiver则为setter调用时的this值。

// obj.content = '你好，世界' // 设置属性值

let setContent = Reflect.set(obj, 'content', '你好，世界') // 设置属性值
console.log(setContent); // true，成功时返回true，否则返回false
console.log(Reflect.get(obj, 'content') ); // 你好，世界
console.log(obj.content); // 你好，世界

 

Reflect.deleteProperty()

静态方法 Reflect.deleteProperty() 允许用于删除属性。它很像delete obj.key，但它是一个函数,成功时返回true，否则返回false,这里的成功是根据结果来看的，如果属性不存在，则返回true，否则返回false

Reflect.deleteProperty(target, propertyKey)

// target 删除属性的目标对象。

// propertyKey 需要删除的属性的名称。

 

delete obj.content // 删除属性
console.log(obj); // {length: 11, char: 'utf-8'}

let deleteContent = Reflect.deleteProperty(obj, 'content') // 删除属性
console.log(deleteContent); // true，成功时返回true，否则返回false,这里的成功是根据结果来看的，如果属性存在，则返回true，否则返回false
console.log(obj); // {length: 11, char: 'utf-8'}
console.log(obj);

为什么使用reflect

Reflect 提供的是一整套反射能力 API，它的调用方式，参数和返回值都是统一风格的，在Reflect 出现之前我们只是利用分散的 API 完成一些动态编程的事情，让动态编程有了一个统一的使用标准

和proxy的关系

proxy是代理对象，它的构造器中就包含了和Reflect相同的方法，当使用proxy代理一个引用类型时，就可以简洁的使用Reflect来实现动态编程的效果，

Reflect和proxy的切合度很高，同时也能够避免使用过多分散API带来的隐性错误（如receiver可以解决this的指向问题）和代码的冗余

总之，reflect整合了一套API用于动态化编程，它可以方便简洁的实现proxy的动态拦截代理

tips 动态编程：响应式数据的原理，当修改页面上的某一个值时，页面效果也随之改变

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

构造器

const p = new Proxy(target, handler)

// target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

// handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为,比如访问和赋值时的而外操作。

Proxy.revocable()

Proxy.revocable() 方法可以用来创建一个可撤销的代理对象。返回一个包含了代理对象本身和它的撤销方法的可撤销 Proxy 对象。

Proxy.revocable(target, handler);
// target 将用 Proxy 封装的目标对象。可以是任何类型的对象，包括原生数组，函数，甚至可以是另外一个代理对象。

// handler 一个对象，其属性是一批可选的函数，这些函数定义了对应的操作被执行时代理的行为。

代理的意义

        首先代理的对象和原对象的属性和值是绑定一致的，可以理解为指向同一个内存地址，也就是说对代理对象的所有操作结果，最终都会回到原对象中，这个过程就可以实现一些其他操作，例如，改变一个对象的值时，将页面重载一遍，引起页面的变化，这个过程就是响应

一个proxy示例

let obj = {
  name: '张三',
  age: 20,
  sex: '男',
  /**
   * @param {any} val
   */
  set address(val){
    this.address = val;
    return val;
  }
}

const p = new Proxy(obj,{
  get: (obj,key,receiver)=>{
    let res = Reflect.get(obj,key,receiver);
    return res;
  },
  set: (obj,key,val,receiver)=>{
    if(typeof val == 'number'){
      console.log('不能设置数字')
      return;
    }
    let res = Reflect.set(obj,key,val,receiver);
    return res;
  }
})
p.name='李四';
p.age=18;
console.log(obj,p)

可以看到 被代理的对象obj会受到p的影响触发改变，而对代理对象属性赋值时，我们可以在中间穿插其他操作，如这里不允许对属性赋值数字，

完整代码和结果展示

reflect.js

let obj ={
  content: 'hello world',
  length: 11,
  char: 'utf-8'
}

let Keys = Object.keys(obj) // 返回一个由属性名组成的数组
console.log(Keys); // ['content', 'length', 'char']

let keys = Reflect.ownKeys(obj) // 返回一个由属性名组成的数组
console.log(keys); // ['content', 'length', 'char']

let isChar = Reflect.has(obj, 'char') // 判断属性是否存在
console.log(isChar); // true

let content = Reflect.get(obj, 'content') // 获取属性值
console.log(content); // hello world
console.log(obj.content); // hello world

// obj.content = '你好，世界' // 设置属性值

let setContent = Reflect.set(obj, 'content', '你好，世界') // 设置属性值
console.log(setContent); // true，成功时返回true，否则返回false
console.log(Reflect.get(obj, 'content') ); // 你好，世界
console.log(obj.content); // 你好，世界

delete obj.content // 删除属性
console.log(obj); // {length: 11, char: 'utf-8'}

let deleteContent = Reflect.deleteProperty(obj, 'content') // 删除属性
console.log(deleteContent); // true，成功时返回true，否则返回false,这里的成功是根据结果来看的，如果属性存在，则返回true，否则返回false
console.log(obj); // {length: 11, char: 'utf-8'}
console.log(obj);

proxy.js 

let obj = {
  name: '张三',
  age: 20,
  sex: '男',
  /**
   * @param {any} val
   */
  set address(val){
    this.address = val;
    return val;
  }
}

const p = new Proxy(obj,{
  get: (obj,key,receiver)=>{
    let res = Reflect.get(obj,key,receiver);
    return res;
  },
  set: (obj,key,val,receiver)=>{
    if(typeof val == 'number'){
      console.log('不能设置数字')
      return;
    }
    let res = Reflect.set(obj,key,val,receiver);
    return res;
  }
})
p.name='李四';
p.age=18;
console.log(obj,p)

更多内容

更多Reflect和proxy相关的方法和属性可以查看：

Reflect - JavaScript | MDN (mozilla.org)

Proxy() 构造函数 - JavaScript | MDN (mozilla.org)