ES6之Reflect

1.概述
2.静态方法
3.实例:使用Proxy实现观察者模式

1.概述

Reflect对象和Proxy对象一样,也是ES6为了操作对象而提供新的API,Reflect对象的设计目的有这样几个。
(1)将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到放到Reflect对象上。
(2)修改某些Object方法的返回结果,让其变得更加合理,比如,Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Reflect.defineProperty(obj, name, desc)则会返回false。

// 老写法
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

(3)让Object操作都变成函数行为。某些Object操作方式是命令时的,比如name in Object和delete obj[name],而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
(4)Reflect对象的方法与Proxy对象的方法一一对应,不管你在Proxy上如何修改对象的默认行为,Reflect总可以获取到

2.Reflect静态方法

Reflect的静态方法

3.使用Proxy实现观察者模式

观察着模式指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。请看一下例子

const person = observable({
  name:'张三',
  age:20
})//创建一个常量,常量的值是函数observable的返回值

function print() {
  console.log(`${person.name},${person.age}`)
}//创建观察到数据发生变化时,执行的对应函数

observe(print)//输入函数
person.name = '李四' //修改属性的值
//输出
//李四,20 
//执行了观察函数

上面代码中,数据对象person是观察目标,函数print是观察者,一旦数据发生变化,print就会自动执行。

下面是使用proxy写一个观察者模式最简单的实现,即实现observableobserve这两个函数。主要思路是observable函数返回一个原始对象的Proxy代理,拦截赋值操作,触发充当观察者的各个函数

const queuedObservers = new Set();  //创建一个set数据结构,之后用来存储观察到数据发生改变的时候执行的函数

const observe = fn => queuedObservers.add(fn); //创建一个名为observe的函数,用于实现观察
const observable = obj => new Proxy(obj,{set})//创建一个名为observable的函数,用Proxy实现观察

function set(target, key, value, receiver) {
  const result = Reflect.set(target, key, value, receiver);
  queuedObservers.forEach(observer => observer());
  return result;
}
//set函数,用于上面observable函数中配置对象的set执行,{ set }为ES6的新语法

上面代码中,先定义了一个Set集合,所有观察者函数都放进这个集合。然后,observable函数返回原始对象的代理,拦截赋值操作。拦截函数set之中,会自动执行所有观察者。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本人自学es6已经有一段时间了,只觉得有些时候很是枯燥无味, 时而又觉得在以后的职业生涯中会很有用,因为es6的很...
    可乐_37d3阅读 1,583评论 0 0
  • Reflect对象是ES6为了操作对象提供的新的API,它为了实现将object对象上的一些明显属于语言内部...
    我家的猫子在哪里阅读 441评论 0 0
  • 我求救于歌者 他耸了耸肩 给我安排了一出戏 邂逅 几日前 九点夜 一辆旧车 一部废人 宛如临近死亡 漫无目地游荡 ...
    Linperson阅读 202评论 0 0
  • 在大学里面大家都用过VC6.0来进行编程。VC6.0属于集成开发环境,一份代码从文本变成可执行的程序只需要在其中点...
    Thunder说阅读 3,527评论 0 0
  • 之前有段时间短暂地创作了关于你所不知道的魔都的四篇短小精悍的文章。现在想想正是佩服之前的创作力以及表达欲望啊 今天...
    DediWhoReal阅读 140评论 0 0