原文:http://ariya.ofilabs.com/2013/07/es6-and-proxy.html


能够拦截在一个对象上的指定操作的能力是非常有用的,尤其是在故障调试的时候.通过ECMAScript 6中的新特性——代理(proxy),这种能力才最终得以实现.

在目前最新的ES6规范草案中(2013年5月14日发布,第15次修订版),第15.18小节——代理对象(Proxy Objects)这部分的文档仍然是空的.不过随着规范的日趋稳定,这里会补充上完整的参考文档的.目前,可以在ES wiki上的直接代理(Direct Proxies)页面内找到最详细的资料.在我写这篇文章的时候,只有Firefox 18+实现了最新的代理规范(Chrome实现了一个旧版的已经被废弃的代理规范——Proxy.create).

演示代理特性最好的方式就是通过下面这个简单的例子:

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和另外一个对象interceptor.然后,engineer对象被另外一个由Proxy()函数构建的代理对象所代替.传入Proxy()的第二个参数interceptor是一个处理器(handler)对象.一个处理器对象可以包含有多种处理方法,在这个例子中只有一种处理方法,就是set.set处理方法能够拦截到那些在代理对象身上进行的所有的属性赋值操作.

让我们看看执行下面的这句赋值语句时会发生什么:

engineer.salary = 60;

这时,先前设置好set处理方法将会被调用.因此,会输出这样一条信息:

salary is changed to 60
每当代理对象engineer上的一个属性被赋值时,处理器对象interceptor都会得到通知.只要提前设置好对应的处理方法(set),我们就能够拦截到这一操作,实现自己想要的功能.当然,不只是属性的赋值操作,代理对象身上的其他操作,比如属性的读取,属性的删除,属性的遍历等操作也都可以使用set之外的其他处理方法来进行拦截.

除了调试用途,代理对象还可以用到那些需要数据绑定(data binding)功能的框架中.我们可以把数据模型(data model)设置成为一个代理对象,监控它的属性的值的变化.也就不需要再使用其他的语法(比如必须使用显示的set方法来更改模型的值)或者持续追踪模型的值的变化(比如脏状态检查(dirty state checking))了.

你觉的代理还有什么用呢?

译者注:关于调试用途,我讲一个我自己的真实案例,情节稍有简化.就在前两天,公司的项目中出现一个bug,需要我来解决.我分析出是一个对象的某个属性在运行途中被误删除导致,由于用的是模块化开发,这个对象又被多个模块中的代码处理过,我很难找到这个delete语句到底在哪个文件中.虽然可以在本页面内加载的十几个js文件中搜索delete然后一一排除,但我决定试一下更高端的调试方法.

我在这个对象刚刚生成的代码位置处的下一行写下一句:

obj.watch("prop", function(){console.log(arguments.callee.caller)})

我使用了Firefox特有的watch方法来找出到底哪个函数删掉了obj对象的prop属性,但情况出乎我意料,刷新页面后没有任何东西输出.于是我查一查MDN,原来watch只能监测到属性的变更,而不会监测到属性的删除.关键是这个MDN页面我去年翻译过啊,但我当时没注意到这个细节.

于是我又使出Firefox特有的第二个特性,Proxy.啪啪啪打出这样一句:

obj = Proxy(obj, {deleteProperty : function(){console.log(arguments.callee.caller)}})

就这样成功找到了那个想要找的函数,这应该就是作者一开始所说的故障调试的用途了.

[译]ES6中的代理对象的更多相关文章

  1. 详解es6中Proxy代理对象的作用

    在es6中新添加了Proxy,那么它有什么作用啊?Proxy本意为代理,而es6中的Proxy也就是代理对象,那么代理对象感觉听起来很模糊,在这里就解释一下Proxy代理对象的作用. Proxy的主要 ...

  2. 在maven项目中 配置代理对象远程调用crm

    1 在maven项目中配置代理对象远程调用crm 1.1 在项目的pom.xml中引入CXF的依赖 <dependency> <groupId>org.apache.cxf&l ...

  3. 在spring中获取代理对象代理的目标对象工具类

    昨天晚上一哥们需要获取代理对象的目标对象,查找了文档发现没有相应的工具类,因此自己写了一个分享给大家.能获取JDK动态代理/CGLIB代理对象代理的目标对象. 问题描述:: 我现在遇到个棘手的问题,要 ...

  4. ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法

    在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...

  5. es6中的promise对象

    Promise是异步里面的一种解决方案,解决了回调嵌套的问题,es6将其进行了语言标准,同意了用法,提供了`promise`对象, promise对象有三种状态:pending(进行中) .Resol ...

  6. (1)ES6中let,const,对象冻结,跨模块常量,新增的全局对象介绍

    1.let声明变量,var声明变量,而const声明的常量 2.let与var的区别 let可以让变量长期驻扎在内存当作 let的作用域是分块[ {快1  {快2 }  }每个大括号表示一个独立的块 ...

  7. es6 中增强的对象字面量

    http://www.cnblogs.com/Wayou/p/es6_new_features.html 对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了.具体表现在: ...

  8. JAVAEE——BOS物流项目08:配置代理对象远程调用crm服务、查看定区中包含的分区、查看定区关联的客户

    1 学习计划 1.定区关联客户 n 完善CRM服务中的客户查询方法 n 在BOS项目中配置代理对象远程调用crm服务 n 调整定区关联客户页面 n 实现定区关联客户 2.查看定区中包含的分区 n 页面 ...

  9. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

随机推荐

  1. ELF Format 笔记(十二)—— 段类型(segment types)

    ilocker:关注 Android 安全(新手) QQ: 2597294287 PT_NULL:如果段类型是 PT_NULL,那相应程序头结构体的其它成员都无意义,该程序头项可被忽略. 暂时还没遇到 ...

  2. ANSYS17.0详细安装图文教程

    ANSYS 17.0是ANSYS的最新版.下面以图文方式详细描述该软件的安装过程. 1 安装前的准备 安装之前需要做的准备工作: 在硬盘上腾出30G的空间来.(视安装模块的多少,完全安装可能需要二十多 ...

  3. GLine游戏(Win32GUI实现,CodeBlocks+GCC编译)

    游戏规则: 在10X10的棋盘上有五种颜色的棋子. 点击一个棋子,再点击一个空格子,如果两者之间有一条路径的话,棋子会移动到空格子内. 每移动一次,棋盘上会增加三个棋子,其位置和颜色都是随机的. 当横 ...

  4. Freemarker与Servlet

    1.导入jar包(freemarker.jar) 2.web.xml配置一个普通servlet <servlet> <servlet-name>hello</servle ...

  5. AI方向

    普通程序员如何转向AI方向   眼下,人工智能已经成为越来越火的一个方向.普通程序员,如何转向人工智能方向,是知乎上的一个问题.本文是我对此问题的一个回答的归档版.相比原回答有所内容增加. 一. 目的 ...

  6. 图像旋转 OpenCV实现

    经常对一幅图像进行旋转操作,OpenCV中提供了很方便易用的仿射变换函数warpAffine, 通过getRotationMatrix2D可以得到放射变换矩阵(矩阵大小2x3) #include &l ...

  7. 如何在Excel中通过VBA快速查找多列重复的值

    今天项目组的一个同事问我如何快速的找到一个Excel中第3列和第5列的值完全重复的值,我想了想虽然Excel中自带查找重复值的功能,但是好像只能对同一列进行比较,所以就写了一个VBA进行处理,VBA非 ...

  8. Linux实现https方式访问站点

    超文本传送协议(HyperText Transfer Protocol,HTML)是一种通信协议,它允许将超文本标记语言文档从web服务器传送到wel浏览器. HTML的特点: 1.支持客户/服务器模 ...

  9. java中Integer,String判断相等与integer的比较大小

    package sfk.bbs.test.springjsbctempletTest; import static org.junit.Assert.*; import org.junit.Test; ...

  10. MVC复杂模型绑定

    当初遇到业务需求ajax提交一组对象数组到服务器.但是苦于mvc的默认绑定器.绑定不上去.好吧只有靠自己了. 当初就是参考这个大大的博客:http://www.cnblogs.com/xfrog/ar ...