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定时机制
Oct 29 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
原生js的数组除重复简单实例
May 24 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
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 飞信好友免费短信API接口开源版
2010/07/22 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python 开发Activex组件方法
2009/11/08 Python
python删除某个字符
2018/03/19 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python 用下标截取字符串的实例
2018/12/25 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
毕业生就业自荐书
2013/12/15 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
小学工作总结2015
2015/05/04 职场文书
工程主管竞聘书
2015/09/15 职场文书
导游词之张家界
2019/10/31 职场文书
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL