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更改class和id的方法
Oct 10 Javascript
让table变成exls的示例代码
Mar 24 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
jquery 操作DOM案例代码分享
2012/04/05 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jquery对象与DOM对象转化
2017/02/08 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
python快速查找算法应用实例
2014/09/26 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
电子商务自荐书范文
2014/01/04 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
公司演讲稿开场白
2014/08/25 职场文书
解除劳动合同证明书
2014/09/26 职场文书
处级干部考察材料
2014/12/24 职场文书
销售辞职信范文
2015/03/02 职场文书