ES6中Proxy代理用法实例浅析


Posted in Javascript onApril 06, 2017

本文实例讲述了ES6中Proxy代理用法。分享给大家供大家参考,具体如下:

ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。举一个例子来说:

var engineer = { name: 'Joe Sixpack', salary: 50 };
var interceptor = {
 set: function (receiver, property, value) {
  console.log(property, 'is changed to', value);
  receiver[property] = value;
 }
};
engineer = Proxy(engineer, interceptor);

engineer对象被代理Proxy构建的代理对象代替,传入Proxy的第二个参数是一个处理器函数,一个处理器函数有多种方法,如get、set等方法。这里的set方法能够拦截到那些在代理对象身上进行的所有的属性赋值操作。

当我们执行下面赋值:

engineer.salary = 60;

会触发处理器,输出信息:

salary is changed to 60

每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。

当然了,Proxy可不是仅仅为了调试而诞生的,如果你用过Sencha Touch 或者 AngularJS的话,就会发现这些框架都是类似数据模型绑定的功能。

笔者曾在Sencha Touch中用过代理,代码如下:

proxy:{//数据代理
//       type:'localstorage',
//       id:'bills',
    // limitParam:'limit',
    // pageParam:'page',
    //将用户代理改为sql,通过websql来解决localstorage的5MB存储上限的问题
    type:'sql',
    database:'myDB',
    table:'bill',
},
//filters:[{property:"kind",value:"无"}],//过滤属性
listeners:{
    removerecords:function(){
      console.log("数据被删除");
    },
    addrecords:function(){
      console.log("数据被追加");
    },
    updaterecord:function(){
      console.log("数据被修改");
    },
}

可以看到,它采用的是一种监听setter和getter的办法,而在Angular中采用的则是脏检测。。当我们有了Proxy后,对于简单的数据模型绑定就可以简化这些特定的检测方式了。

我们还可以使用proxy来实现多继承。众所周知,JavaScript中每个对象只能有一个直接的上层原型,从而无法实现多继承:

var foo = {
  foo: function () {
    console.log("foo")
  }
};
var bar = {
  bar: function () {
    console.log("bar")
  }
};
var sonOfFoo = Object.create(foo);
sonOfFoo.foo();   //"foo"
var sonOfBar = Object.create(bar);
sonOfBar.bar();   //"bar"
//怎么才能既有foo方法又有bar方法?

我们可以通过proxy中的get处理器来生成一个继承两个原型的代理对象:

sonOfFooBar = new Proxy({}, {
  get: function (target, name) {
    return target[name] || foo[name] || bar[name];
  }
})
sonOfFooBar.foo();  //"foo",有foo方法,继承自对象foo
sonOfFooBar.bar();  //"bar",也有bar方法,继承自对象bar

其还有很多应用场景,可以参考下面这篇文章:proxy

但是百度EFE团队给出的评价是该功能不能通过模拟实现,所以建议不要使用。所以还是值得观望一段时间的。

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

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 #Javascript
ES6中的箭头函数实例详解
Apr 06 #Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 #Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
JS的反射问题
2010/04/07 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python列表list保留顺序去重的实例
2018/12/14 Python
Python实现DDos攻击实例详解
2019/02/02 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python request操作步骤及代码实例
2020/04/13 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
初一地理教学反思
2014/01/16 职场文书
留学推荐信英文范文
2015/03/26 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS