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 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
理解 JavaScript Scoping & Hoisting(二)
Nov 18 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
vue组件间通信子与父详解(二)
Nov 07 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 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来检测proxy
2006/10/09 PHP
php向js函数传参的几种方法
2014/08/10 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php源码的使用方法讲解
2019/09/26 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
2014保险公司内勤工作总结
2014/12/16 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
新闻通讯稿范文
2015/07/22 职场文书
高中开学感言
2015/08/01 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android