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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php实现图片添加水印功能
2014/02/13 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python学习 流程控制语句详解
2016/06/01 Python
python编程羊车门问题代码示例
2017/10/25 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
python实现动态创建类的方法分析
2019/06/25 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
环境科学专业个人求职信
2013/09/26 职场文书
个人生活学习自我评价范文
2013/11/26 职场文书
策划创业计划书
2014/02/06 职场文书
毕业生就业协议书
2014/04/11 职场文书
2014年纠风工作总结
2014/12/08 职场文书
布达拉宫导游词
2015/02/02 职场文书
团日活动总结格式
2015/05/11 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
无线电知识基础入门篇
2022/02/18 无线电
Java中的随机数Random
2022/03/17 Java/Android
python内置模块之上下文管理contextlib
2022/06/14 Python