其他分享
首页 > 其他分享> > JS高级—10—Proxy类;Reflct对象;响应式原理;

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

作者:互联网

一、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