原文: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. 【转载】Linux 文件系统的目录结构

    /bin 基础系统所需要的那些命令位于此目录,也是最小系统所需要的命令:比如 ls.cp.mkdir等命令:功能和/usr/bin类似,这个目录中的文件都是可执行的,普通用户都可以使用的命令.做为基础 ...

  2. Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。

      解决方法:   下载Win10的中文语言包.

  3. HTML总结

    几个知识点: HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML框架结构: <!DOCTYPE html> <html> < ...

  4. 文件夹右键添加“DOS”命令

    导入注册表 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Folder\shell\RunCMD] @="进入命令行&quo ...

  5. OllyUni.dll

    OllyUni.dll 周银辉 好像很多人找不到OllyUni.dll ,下载在这里:http://www.phenoelit.org/win/index.html 注:在OllyDBG2.0中用不了 ...

  6. Echarts Map地图类型使用

    使用的时候出现了一个BUG, China地图的底色没有绘制出来,现在把一个小的DEMO给大家,以供参考,并附上参考文章(http://blog.csdn.net/danielinbiti/articl ...

  7. linux 代码分析工具 gprof - 以wpa_supplicant为例

        当我们遇到一个新的程序的时候,经常会无从下手,需要debug一个功能的时候,我们不知道函数的运行流程是怎么样的,这就需要借助工具来帮助我们加快流程了.这里以分析wpa_supplicant为例 ...

  8. Fiddler 使用备忘

    快捷键 ctrl + f(session 查询,高亮) ctrl + x(清除所有 session) alt + q(定位到命令行,以下操作为命令行语句) help(查看帮助文档) select sc ...

  9. js实现点击修改按钮之后单元格变成可编辑状态

    主要实现原理: 每一行有一个修改按钮 点击修改之后,获取行对象,通过行对象再获取行中单元格数组.然后把每一个单元格中的innerHTML替换成input输入框,并赋值value=原来单元格中的内容,鼠 ...

  10. STM32端口复用和映射

    STM32的功能引脚重映射和复用功能STM32中有很多内置外设的输入输出引脚都具有重映射(remap)的功能,本文对一些在使用引脚重映射时所遇到的有关问题加以说明.我们知道每个内置外设都有若干个输入输 ...