Proxy --概述篇
概述:
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 --概述篇的更多相关文章
- Android核心分析之十六Android电话系统-概述篇
Android电话系统之概述篇 首先抛开Android的一切概念来研究一下电话系统的最基本的描述.我们的手机首先用来打电话的,随后是需要一个电话本,随后是PIM,随后是网络应用,随后是云计算,随后是想 ...
- 掌上快递 APP 项目之概述篇
概述 学习Android开发也有一段时间了,利用业余时间独立制作的一款快递类APP软件.大概2个多星期吧,自己将其定位为"集快递信息追踪.附近快递点查询. 快递公司投诉功能为一体的便民生活类 ...
- 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(概述篇)
SDK 开发 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(理念与设计原则篇) 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(开发基础篇) 系列 Snuba:Sentr ...
- 【AR实验室】ARToolKit之概述篇
0x00 - 前言 我从去年就开始对AR(Augmented Reality)技术比较关注,但是去年AR行业一直处于偶尔发声的状态,丝毫没有其"异姓同名"的兄弟VR(Virtual ...
- Java性能测试从入门到放弃-概述篇
Java性能测试从入门到放弃-概念篇 辅助工具 Jmeter: Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试.JMeter 可以用于对服务器.网络 ...
- iOS音频开发系列-概述篇
概述 iOS中对于音频的处理,苹果提供了两个库. AVFoundation AudioToolbox 在iOS系统中apple对上述的流程进行了封装并提供了不同层次的接口
- ql自动化测试之路-概述篇
前言:本节主要讲解自动化测试的基本概述,包括分层自动化测试.自动化测试中用到的工具.以及关于自动化测试的想法 一.分层自动化测试 上图是经典的测试金字塔.用它来形容目前测试投入的价值是比较适合的,同样 ...
- 【JAVA】笔记(12)---集合(1)-概述篇
楔子: 1.集合相当于一个容器,数组虽然也相当于一个容器,但是集合的特性更符合我们日常开发的需求,所以集合的使用更加频繁: 2.集合特性: 1)集合的长度可变,数组一经初始化,长度固定: 2)集合可以 ...
- Http权威指南(概述篇总结)
之前的<锋利的jQuery>后面陆续翻完了,实在觉得没什么值得记录的,也就没继续写了,然后看见书架上有 本去年买的<Http权威指南>,其实做web编程的,对于Http协议还是 ...
随机推荐
- leetcode-algorithms-33 Search in Rotated Sorted Array
leetcode-algorithms-33 Search in Rotated Sorted Array Suppose an array sorted in ascending order is ...
- leetcode-algorithms-3 Longest Substring Without Repeating Characters
leetcode-algorithms-3 Longest Substring Without Repeating Characters Given a string, find the length ...
- 函数使用三:采购过账BAPI_GOODSMVT_CREATE
一.货物移动.bapi BAPI_GOODSMVT_CREATE其中 参数 : GOODSMVT_CODE 有 GMCODE Table T158G - 01 - MB01 - Goods Rece ...
- Git中ssh的使用
远程仓库前期工作(SSH HEY的使用) 1.1.注册GitHub账号 1.2.创建SSH Key 打开Git Bash后,输入ssh-keygen -t rsa -C "youremail ...
- C++类型检查
与大多数语言一样,C++也是类型决定了能对该对象进行的操作,一条表达式是否合法依赖于其中参与运算的对象的类型,C++是一种静态数据类型语言,它的类型检查发生在编译时, 因此编译器知道程序中每一个变量对 ...
- E - Let's Go Rolling!
题目描述:数轴上有nn个质点,第ii个质点的坐标为xixi,花费为cici,现在要选择其中一些点固定,代价为这些点的花费,固定的点不动,不固定的点会向左移动直至遇到固定的点,代价是这两点的距离,如果左 ...
- 从此web开发so easy!
ECharts (Enterprise Charts 商业产品图表库) 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图 ...
- JavaScript 上万条数据 导出Excel文件(改装版)
最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var ...
- openssl修改版本号
1.查看当前openssl版本号 openssl version 2.查看openssl所在位置 which openssl 3.查看保存版本号的libcrypto.so所在位置 ldd /usr/b ...
- 尚学堂java 参考答案 第九章
一.选择题 1.AC 解析:A.注意题目是Collections不是 Collection,前者是一个until下的类,后者才是接口 C.Set中的数据是无序且不能重复的 2.A 解析:将发生数组越界 ...