原文: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. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  2. ELF Format 笔记(十三)—— 段权限

    ilocker:关注 Android 安全(新手) QQ: 2597294287 一个可被系统加载的程序至少拥有一个可加载段.当系统创建可加载段的内存映像时,会根据 p_flags 赋予一定的访问权限 ...

  3. [WPF系列]从基础起步学习系列计划

    引言 WPF技术已经算不什么新技术,一搜一大把关于WPF基础甚至高级的内容.之前工作中一直使用winform所以一直没有深入学习WPF,这次因项目中使用了WPF技术来实现比较酷的展示界面.我在这里只是 ...

  4. 数据分析:.Net程序员该如何选择?

    上文我介绍了用.Net实现的拉勾爬虫,可全站采集,其中.Net和C#(不区分)的数据爬取开始的早,全国主要城市都有一定数量的分布,加上有了近期其他相似技术类别的数据进行横向比较,可以得到比较合理的推测 ...

  5. bzoj-4514(网络流)

    题目链接: 4514: [Sdoi2016]数字配对 Description 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数 ...

  6. Core functionality.md

    核心功能 在Nginx配置文件总可以把配置文件的结构如下: main配置段 event { ... } http { ... server { server_name root location /u ...

  7. c# 传递Null的string值导致的调用C++的dll报错 Attempted to read or write protected memory.

    c# 调用C++的dll报错 Attempted to read or write protected memory:   原因是:c# 传递Null的string值导致的,将Null改为string ...

  8. SharePoint 2013技巧分享系列 - 隐藏Blog和Apps左侧导航菜单

    企业内部网中,不需要员工创建Blog或者创建,安装SharePoint应用,因此需要在员工个人Web页面需要隐藏Blog或者Apps导航菜单, 其步骤设置如下: 该技巧适合SharePoint 201 ...

  9. Qt5.7.0配置选项(configure非常详细的参数)

    configure是一个命令行工具,用于配置Qt编译到指定平台.configure必须运行于Qt源码根目录.当运行configure时,编译源码使用的是所选工具链中的make工具. 一.源码目录.编译 ...

  10. JSX语法简介

    React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...