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 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
javascript基础的动画教程,直观易懂
Jan 10 Javascript
jquery 图片预加载 自动等比例缩放插件
Dec 25 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
js实现百度淘宝搜索功能
Feb 17 Javascript
简单了解常用的JavaScript 库
Jul 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实现的php代码加密解密类完整实例
2016/10/12 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
详解Python3 基本数据类型
2019/04/19 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
素食餐饮项目创业计划书
2014/02/02 职场文书
护理专业自荐信范文
2014/02/26 职场文书
县级文明单位申报材料
2014/05/23 职场文书
收款委托书范本
2014/09/11 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
消防演习感想
2015/08/10 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
Python Numpy库的超详细教程
2022/04/06 Python