首页 > 其他分享> 文章详细

JS高级—10—Proxy类；Reflct对象；响应式原理；

2022-05-19 20:31:43 阅读：153 来源： 互联网

标签：10 Reflct name 对象 JS Reflect proxy key receiver

一、Proxy类

1.1概念

proxy最主要的操作是，对对象、函数对象的所有操作做了一个监听或者说捕获拦截，然后可以在捕获器里定义自己的行为；

1.2Proxy的所有捕获器

proxy对象比以前的Object.defineProperty（）做了很多增强；除了可以监听对象的setter、getter访问器，还有其他的操作也可以，比如in、delete等等

in操作符会调用proxy对象的has捕获器；

delete操作符会diaoyongpxoxy

apply()和construct()用于捕获器用于代理一个函数对象的时候；

当ObjProxy.apply()时，会被apply（）捕获；

当new ObjProxy()时，会被construct（）捕获；

二、Reflect系统对象

2.1概念

Reflect是一个系统内置对象，不需要new Reflect（）就可以使用了；

为什么需要REflect系统对象，

1.首先是更规范，

让Object更加专注当一个构造函数，把对对象的操作都集中在一个单独的对象Reflect对象中；

我们通过Objcet.prototype.construct可以获取Object函数对象（不是new Objcet的实例对象，是 const Object = new Function（）的函数对象），然后我们可以看到函数对象里面定义了很多方法，比如我们很熟悉的Objcet.getOwnPropertyDescriptor（）；

2.其次，可以和proxy结合使用；

我们使用proxy代理对象，就是为了我们对obj对象的操作做一个代理，因为直接修改对象是不好的（Object.defineProperty()），就是直接修改对象，但是目前proxy的捕获器里其实还是直接修改对象，比如set访问器里还是target[key] = newValue，这个时候我们使用Relect就可以避免；

拿着两种方式有什么区别吗？看着Reflect.set（）还更麻烦些。

当然有，

我们知道，有的时候，对象的某些属性其实是不可以被赋值的，比如说我们冻结一个对象Object.freeze（obj）；

Reflect.set（）其实可以返回一个boolean值，告诉我们设置值成功或失败，

但是target[key]= newVAlue就没有返回值了，我们设置成功与否就很难判别；

2.2Reflect的常见方法

2.3Reflect的construct

对target进行new操作，然后创建出来一个实例, 但是这个实例的原型constructor指向的是NewTarget 对Person进行new操作，然后创建出来一个实例, 但是这个实例的原型constructor指向的Student

2.4proxy和reflect

我们可以看到proxy和reflect的方法都是一一对应的，所以proxy和reflect可以搭配使用；

但是reflect也是可以单独使用的；

三、Proxy捕获器和Reflect对象的Reciver参数作用

我们其实只实现了对name属性的捕获，并没有实现对this的捕获。

像这个例子中，return this._name中其中调用this时走的时obj自己的this，这说明我们的代理不够完全；

Reflect对象的reciver参数可以改变原有对象的this，原有对象的this本来指向的this，现在就会指向代理对象了；

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

 const obj = {
  _name: "why",
  get name() {
    return this._name
  },
  set name(newValue) {
    this._name = newValue
  }
}

const objProxy = new Proxy(obj, {
  get: function(target, key, receiver) {
    // receiver是创建出来的代理对象
    console.log("get方法被访问--------", key, receiver)
    console.log(receiver === objProxy)
    return Reflect.get(target, key, receiver)
  },
  set: function(target, key, newValue, receiver) {
    console.log("set方法被访问--------", key)
    Reflect.set(target, key, newValue, receiver)
  }
})

// console.log(objProxy.name)
objProxy.name = "kobe"

四、响应式原理

标签：10,Reflct,name,对象,JS,Reflect,proxy,key,receiver
来源： https://www.cnblogs.com/EricShen/p/16289985.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9