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协议还是 ...
随机推荐
- Ubuntu下忘记MySQL root密码解决方法
1.忘了mysql密码,从网上找到的解决方案记录在这里. 编辑mysql的配置文件/etc/mysql/my.cnf,在[mysqld]段下加入一行“skip-grant-tables”. 2.重启服 ...
- C++ 四种新式类型转换
static_cast ,dynamic_cast,const_cast,reinterpret_cast static_cast 定义:通俗的说就是静态显式转换,用于基本的数据类型转换,及指针之间的 ...
- poj1002 大数的 n的m次
import java.math.BigDecimal; import java.util.Scanner; public class Main { public static void main(S ...
- 【转】Vue 2.0封装axios笔记
前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 V ...
- javascript中的require、import和export模块文件
CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...
- Matlab、R向量与矩阵操作 z
已有 1849 次阅读 2012-8-2 15:15 |系统分类:科研笔记|关键词:矩阵 480 window border center Matlab.R向量与矩阵操作 描 述 Matla ...
- win10打文件预览功能
- 自定义xadmin后台首页
登陆xadmin后台,首页默认是空白,可以自己添加小组件,xadmin一切都是那么美好,但是添加小组件遇到了个大坑,快整了2个礼拜,最终实现想要的界面.初始的页面如图: 本机后台显示这个页面正常,do ...
- markdown语法模板
(GitHub-Flavored) Markdown Editor Basic useful feature list: Ctrl+S / Cmd+S to save the file Ctrl+Sh ...
- 數據庫ORACLE轉MYSQL存儲過程遇到的坑~(總結)
ORACLE數據庫轉MySQL數據庫遇到的坑 總結 最近在做Oracle轉mysql的工程,遇到的坑是真的多,尤其是存儲過程,以前都沒接觸過類似的知識,最近也差不多轉完了就總結一下.希望能幫到一些人( ...