ES6 proxy和reflect的使用方法与应用实例分析


Posted in Javascript onFebruary 15, 2020

本文实例讲述了ES6 proxy和reflect的使用方法。分享给大家供大家参考,具体如下:

proxy和reflect都是es6为了更好的操作对象而提供的新的API,接下来探讨一下二者的作用,联系。

设计proxy,reflect的作用:

proxy的作用:

Proxy的设计目的在于(修改编程语言),修改某些操作方法的默认行为,

等同于在语言层面作出修改,是元编程(meta programming)  例如修改set,get方法

reflect的作用:

1,映射一些明显属于对象语言内部的方法,目前是共存于Object和Reflect上,未来只在Reflect上

2,修改一些Object上的方法返回的结果,减少异常抛出,使其变得更加合理

3,让Object操作都变成函数行为(主要的作用)

4,Reflect对象的方法与Proxy对象的方法一一对应(主要的作用)

proxy和reflect的方法:

proxy的实例方法:

get() set() apply() has() cunstruct() deleteProperty() defineProperty()
getOwnPropertyDescriptor() getPrototypeOf() isExtensible() ownKeys(), preventExtensions() setPrototypeOf()  
var person = {
 name: "张三"
};
 
var proxy = new Proxy(person, {
 get: function(target, property) {
  if (property in target) {
   return target[property];
  } else {
   throw new ReferenceError("Property \"" + property + "\" does not exist.");
  }
 }
});

注:目标对象内部的this关键字会指向 Proxy 代理

自身方法:Proxy.revocable方法返回一个可取消的 Proxy 实例

reflect的静态方法:

和proxy相对应,reflect有13个静态方法,分别一一对应于proxy的实例方法

Reflect.apply(target, thisArg, args) Reflect.construct(target, args)
Reflect.get(target, name, receiver) Reflect.set(target, name, value, receiver)
Reflect.defineProperty(target, name, desc) Reflect.deleteProperty(target, name)
Reflect.has(target, name) Reflect.ownKeys(target)
Reflect.isExtensible(target) Reflect.preventExtensions(target)
Reflect.getOwnPropertyDescriptor(target, name) Reflect.getPrototypeOf(target)
Reflect.setPrototypeOf(target, prototype)  

proxy和reflect联系:proxy的实例方法和reflect的静态方法一一对应

实例:观察者模式的实现

const queuedObservers = new Set();
 
const observe = fn => queuedObservers.add(fn);//接收一个函数fn
const observable = obj => new Proxy(obj, {set});//接收一个对象obj,采用set函数拦截设置obj
 
function set(target, key, value, receiver) {
 const result = Reflect.set(target, key, value, receiver);
 queuedObservers.forEach(observer => observer());
 return result;
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
详解javascript函数的参数
Nov 10 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
Js面试算法详解
Apr 08 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JS轮播图的实现方法
Aug 24 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
es6 super关键字的理解与应用实例分析
Feb 15 #Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 #Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
Javascript操作select控件代码实例
Feb 14 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php单例模式示例分享
2015/02/12 PHP
浅谈php的优缺点
2015/07/14 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
跟老齐学Python之模块的加载
2014/10/24 Python
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
大型活动策划方案
2014/01/12 职场文书
安全生产责任书范本
2014/04/15 职场文书
模特大赛策划方案
2014/05/28 职场文书
实习工作表现评语
2014/12/31 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
调解协议书范本
2016/03/21 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python