概述:

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

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

  1. var obj = new Proxy({}, {
  2. get: function (target, key, receiver) {
  3. console.log(`getting ${key}!`);
  4. return Reflect.get(target, key, receiver);
  5. },
  6. set: function (target, key, value, receiver) {
  7. console.log(`setting ${key}!`);
  8. return Reflect.set(target, key, value, receiver);
  9. }
  10. });

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

  1. obj.count = 1
  2. // setting count!
  3. ++obj.count
  4. // getting count!
  5. // setting count!
  6. //

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

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

  1. var proxy = new Proxy(target, handler);

  

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

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

  1. var proxy = new Proxy({}, {
  2. get: function(target, property) {
  3. return 35;
  4. }
  5. });
  6.  
  7. proxy.time //
  8. proxy.name //
  9. proxy.title //

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

  

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

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

  1. var target = {};
  2. var handler = {};
  3. var proxy = new Proxy(target, handler);
  4. proxy.a = 'b';
  5. target.a // "b"

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

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

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

 

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

  1. var proxy = new Proxy({}, {
  2. get: function(target, property) {
  3. return 35;
  4. }
  5. });
  6.  
  7. let obj = Object.create(proxy);
  8. obj.time //

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

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

  1. var handler = {
  2. get: function(target, name) {
  3. if (name === 'prototype') {
  4. return Object.prototype;
  5. }
  6. return 'Hello, ' + name;
  7. },
  8.  
  9. apply: function(target, thisBinding, args) {
  10. return args[0];
  11. },
  12.  
  13. construct: function(target, args) {
  14. return {value: args[1]};
  15. }
  16. };
  17.  
  18. var fproxy = new Proxy(function(x, y) {
  19. return x + y;
  20. }, handler);
  21.  
  22. fproxy(1, 2) //
  23. new fproxy(1,2) // {value: 2}
  24. fproxy.prototype === Object.prototype // true
  25. 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. Ubuntu下忘记MySQL root密码解决方法

    1.忘了mysql密码,从网上找到的解决方案记录在这里. 编辑mysql的配置文件/etc/mysql/my.cnf,在[mysqld]段下加入一行“skip-grant-tables”. 2.重启服 ...

  2. C++ 四种新式类型转换

    static_cast ,dynamic_cast,const_cast,reinterpret_cast static_cast 定义:通俗的说就是静态显式转换,用于基本的数据类型转换,及指针之间的 ...

  3. poj1002 大数的 n的m次

    import java.math.BigDecimal; import java.util.Scanner; public class Main { public static void main(S ...

  4. 【转】Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...

  5. javascript中的require、import和export模块文件

    CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...

  6. Matlab、R向量与矩阵操作 z

    已有 1849 次阅读 2012-8-2 15:15 |系统分类:科研笔记|关键词:矩阵 480 window border center Matlab.R向量与矩阵操作   描    述 Matla ...

  7. win10打文件预览功能

  8. 自定义xadmin后台首页

    登陆xadmin后台,首页默认是空白,可以自己添加小组件,xadmin一切都是那么美好,但是添加小组件遇到了个大坑,快整了2个礼拜,最终实现想要的界面.初始的页面如图: 本机后台显示这个页面正常,do ...

  9. markdown语法模板

    (GitHub-Flavored) Markdown Editor Basic useful feature list: Ctrl+S / Cmd+S to save the file Ctrl+Sh ...

  10. 數據庫ORACLE轉MYSQL存儲過程遇到的坑~(總結)

    ORACLE數據庫轉MySQL數據庫遇到的坑 總結 最近在做Oracle轉mysql的工程,遇到的坑是真的多,尤其是存儲過程,以前都沒接觸過類似的知識,最近也差不多轉完了就總結一下.希望能幫到一些人( ...