概述:

  Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。

  Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
});

  上面代码对一个空对象架设了一层拦截,重定义了属性的读取(get)和设置(set)行为。这里暂时先不解释具体的语法,只看运行结果。对设置了拦截行为的对象obj,去读写它的属性,就会得到下面的结果。

obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
//

  上面代码说明,Proxy 实际上重载(overload)了点运算符,即用自己的定义覆盖了语言的原始定义。

  ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

  

  Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

  下面是另一个拦截读取属性行为的例子。

var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
}); proxy.time //
proxy.name //
proxy.title //

  上面代码中,作为构造函数,Proxy接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。比如,上面代码中,配置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35

  

  注意,要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。

  如果handler没有设置任何拦截,那就等同于直接通向原对象。

var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"

  上面代码中,handler是一个空对象,没有任何拦截效果,访问proxy就等同于访问target

  一个技巧是将 Proxy 对象,设置到object.proxy属性,从而可以在object对象上调用。

var object = { proxy: new Proxy(target, handler) };

 

  Proxy 实例也可以作为其他对象的原型对象。

var proxy = new Proxy({}, {
get: function(target, property) {
return 35;
}
}); let obj = Object.create(proxy);
obj.time //

  上面代码中,proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截。

  同一个拦截器函数,可以设置拦截多个操作。

var handler = {
get: function(target, name) {
if (name === 'prototype') {
return Object.prototype;
}
return 'Hello, ' + name;
}, apply: function(target, thisBinding, args) {
return args[0];
}, construct: function(target, args) {
return {value: args[1]};
}
}; var fproxy = new Proxy(function(x, y) {
return x + y;
}, handler); fproxy(1, 2) //
new fproxy(1,2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo // "Hello, foo"

转自: ECMAScript 6 入门

作者:阮一峰

Proxy --概述篇的更多相关文章

  1. Android核心分析之十六Android电话系统-概述篇

    Android电话系统之概述篇 首先抛开Android的一切概念来研究一下电话系统的最基本的描述.我们的手机首先用来打电话的,随后是需要一个电话本,随后是PIM,随后是网络应用,随后是云计算,随后是想 ...

  2. 掌上快递 APP 项目之概述篇

    概述 学习Android开发也有一段时间了,利用业余时间独立制作的一款快递类APP软件.大概2个多星期吧,自己将其定位为"集快递信息追踪.附近快递点查询. 快递公司投诉功能为一体的便民生活类 ...

  3. 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(概述篇)

    SDK 开发 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(理念与设计原则篇) 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(开发基础篇) 系列 Snuba:Sentr ...

  4. 【AR实验室】ARToolKit之概述篇

    0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...

  5. Java性能测试从入门到放弃-概述篇

    Java性能测试从入门到放弃-概念篇 辅助工具 Jmeter: Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试.JMeter 可以用于对服务器.网络 ...

  6. iOS音频开发系列-概述篇

    概述 iOS中对于音频的处理,苹果提供了两个库. AVFoundation AudioToolbox 在iOS系统中apple对上述的流程进行了封装并提供了不同层次的接口

  7. ql自动化测试之路-概述篇

    前言:本节主要讲解自动化测试的基本概述,包括分层自动化测试.自动化测试中用到的工具.以及关于自动化测试的想法 一.分层自动化测试 上图是经典的测试金字塔.用它来形容目前测试投入的价值是比较适合的,同样 ...

  8. 【JAVA】笔记(12)---集合(1)-概述篇

    楔子: 1.集合相当于一个容器,数组虽然也相当于一个容器,但是集合的特性更符合我们日常开发的需求,所以集合的使用更加频繁: 2.集合特性: 1)集合的长度可变,数组一经初始化,长度固定: 2)集合可以 ...

  9. Http权威指南(概述篇总结)

    之前的<锋利的jQuery>后面陆续翻完了,实在觉得没什么值得记录的,也就没继续写了,然后看见书架上有 本去年买的<Http权威指南>,其实做web编程的,对于Http协议还是 ...

随机推荐

  1. Lucene.Net 学习(搜索部分)(低要求,写给自己看)

    1. 搜索 排序:lucene 提供了Sort类对结果进行排序 提供了Filter类对查询条件进行限制 你或许会不自觉地拿它跟SQL语句进行比较:“lucene能执行and.or.order by.w ...

  2. python安装MySQLdb(即mysql-Python)模块的一些问题

    1.超时问题 如果出现:ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out ...

  3. HTML相关知识点总结

    1.表格<table>常用属性 cellspacing:两个单元格之间的距离 注:属性值为数字,效果图如下(左边cellspacing="0",右边cellspacin ...

  4. Segment set(线段并查集)

    Segment set Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total S ...

  5. 牛客网 PAT 算法历年真题 1003: 数素数 (20)

    1003:数素数 (20) 时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard (来自 小小) 题目描述 令Pi表示第i个素数.现任给两个正整 ...

  6. PHP中的Trait方法

    <?php /* * 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait. * Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制. * Trait ...

  7. day06_python_1124

    01 昨日内容回顾 字典: 增: setdefault() 有责不变,无责添加 dic['key'] = vaulue 删: pop 按照key pop('key') pop('key',None) ...

  8. Gameobject.Find和Transform.Find应用区别

    using UnityEngine;using System.Collections; public class test : MonoBehaviour{ private GameObject ro ...

  9. Python之路-python基础二

    本章内容:      一.编码格式      二.常用数据类型      三.字符串常用方法      四.列表常用方法  五.数据运算      六.课后作业 编码格式:       ASCII A ...

  10. 【原创】<Debug> QT头文件

    [Error] No such file or directory [Solution] 参考: http://blog.csdn.net/donglynn/article/details/21804 ...