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 相关文章推荐
jQuery DIV弹出效果实现代码
Jul 03 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
layui 弹出层值回传解决方式
Nov 14 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
小程序自定义弹框效果
Nov 16 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中取得image按钮传递的name值
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
2007/08/19 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Pytorch to(device)用法
2020/01/08 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python代码xml转txt实例
2020/03/10 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
物业管理毕业生的自我评价
2014/02/17 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
建国大业观后感600字
2015/06/01 职场文书
学生会主席任命书
2015/09/21 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL