阮一峰ES6入门读书笔记（十）：Proxy
阮一峰ES6入门读书笔记（十）：Proxy 和 Reflect
1. 概述
Proxy用于修改某些操作的默认行为，可以理解为，在魔表对象之前架设了一层“拦截”，外界对该对象的访问，都必须通过这层拦截。
var obj = new Proxy({}, {get: function (target, propKey, receiver) {console.log(`getting ${propKey}!`);return Reflect.get(target, propKey, receiver);},set: function (target, propKey, value, receiver) {console.log(`setting ${propKey}!`);return Reflect.set(target, propKey, value, receiver);}
});
上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对设置了拦截行为的对象obj，去读写它的属性，就会得到下面的结果。
obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
// 2
上面代码说明，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。
ES6 提供了 Proxy 构造函数，用来生成 Proxy 实例。Proxy 接受两个参数，第一个参数 target 是所要代理的目标对象 ，第二个参数 handler 是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。
Proxy 支持的拦截操作主要有以下十三种：
- get(target, propKey, receiver)：拦截对象属性的读取，比如
proxy.foo和proxy['foo']。 - set(target, propKey, value, receiver)：拦截对象属性的设置，比如
proxy.foo = v或proxy['foo'] = v，返回一个布尔值。 - has(target, propKey)：拦截
propKey in proxy的操作，返回一个布尔值。 - deleteProperty(target, propKey)：拦截
delete proxy[propKey]的操作，返回一个布尔值。 - ownKeys(target)：拦截
Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。 - getOwnPropertyDescriptor(target, propKey)：拦截
Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。 - defineProperty(target, propKey, propDesc)：拦截
Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。 - preventExtensions(target)：拦截
Object.preventExtensions(proxy)，返回一个布尔值。 - getPrototypeOf(target)：拦截
Object.getPrototypeOf(proxy)，返回一个对象。 - isExtensible(target)：拦截
Object.isExtensible(proxy)，返回一个布尔值。 - setPrototypeOf(target, proto)：拦截
Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。 - apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如
proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 - construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如
new proxy(...args)。
有以下一些使用技巧：
如果handler 没有设置任何拦截，那就等同于直接通向源对象。
var target = {};
var handler = {};
var proxy = new Proxy(target, handler);
proxy.a = 'b';
target.a // "b"
将 Proxy 对象，设置到 object.proxy 属性，从而可以在 object 对象上调用。
var object = { proxy: new Proxy(target, handler) };
Proxy 实例也可以作为其他对象的原型对象。
Proxy 实例的方法
get()
get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。
get方法可以继承。
set()
set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
apply()
apply方法拦截函数的调用、call和apply操作。
apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。
has()
has()方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。
has()方法可以接受两个参数，分别是目标对象、需查询的属性名。
可以使用has()方法隐藏某些属性，不被in运算符发现。
construct()
construct()方法用于拦截new命令，construct()方法可以接受三个参数。
target：目标对象。args：构造函数的参数数组。newTarget：创造实例对象时，new命令作用的构造函数（下面例子的p）。
construct()方法返回的必须是一个对象，否则会报错。另外，由于construct()拦截的是构造函数，所以它的目标对象必须是函数，否则就会报错。
deleteProperty()
deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。
注意，目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。
defineProperty()
defineProperty()方法拦截了Object.defineProperty()操作。
getOwnpropertyDescriptor()
getOwnPropertyDescriptor()方法拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。
getPrototypeOf()
getPrototypeOf()方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。
Object.prototype.__proto__Object.prototype.isPrototypeOf()Object.getPrototypeOf()Reflect.getPrototypeOf()instanceof
注意，getPrototypeOf()方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。
isExtensible()
isExtensible()方法拦截Object.isExtensible()操作。
注意，该方法只能返回布尔值，否则返回值会被自动转为布尔值。
这个方法有一个强限制，它的返回值必须与目标对象的isExtensible属性保持一致，否则就会抛出错误。
ownKeys()
ownKeys()方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。
Object.getOwnPropertyNames()Object.getOwnPropertySymbols()Object.keys()for...in循环
注意，使用Object.keys()方法时，有三类属性会被ownKeys()方法自动过滤，不会返回。
- 目标对象上不存在的属性
- 属性名为 Symbol 值
- 不可遍历（
enumerable）的属性
preventExtensions()
preventExtensions()方法拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。
这个方法有一个限制，只有目标对象不可扩展时（即Object.isExtensible(proxy)为false），proxy.preventExtensions才能返回true，否则会报错。
setPrototypeOf()
setPrototypeOf()方法主要用来拦截Object.setPrototypeOf()方法。
注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf()方法不得改变目标对象的原型。
Proxy.revocable()
Proxy.revocable()方法返回一个可取消的 Proxy 实例。
let target = {};
let handler = {};let {proxy, revoke} = Proxy.revocable(target, handler);proxy.foo = 123;
proxy.foo // 123revoke();
proxy.foo // TypeError: Revoked
Proxy.revocable()方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。
Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。
4. this 问题
虽然 Proxy 可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理。
另外，Proxy 拦截函数内部的this，指向的是handler对象。
5. 实例：Web 服务的客户端
Proxy 对象可以拦截目标对象的任意属性，这使得它很适合用来写 Web 服务的客户端。
const service = createWebService('http://example.com/data');service.employees().then(json => {const employees = JSON.parse(json);// ···
});
上面代码新建了一个 Web 服务的接口，这个接口返回各种数据。Proxy 可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个 Proxy 拦截就可以了。
function createWebService(baseUrl) {return new Proxy({}, {get(target, propKey, receiver) {return () => httpGet(baseUrl + '/' + propKey);}});
}
同理，Proxy 也可以用来实现数据库的 ORM 层。
Reflect
1. 概述
Reflect 对象和 Proxy 对象一样，也是 ES6 为了操作对象而提供的新API。Reflect对象的设计目的有这样几个。
- 将Object 对象的一些明显属于语言内部的方法，放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来新方法将只部署在 Reflect 对象上。也就是说，从
Reflect对象上可以拿到语言内部的方法。 - 修改某些
Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。 - 让
Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。 Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为。
Proxy(target, {set: function(target, name, value, receiver) {var success = Reflect.set(target, name, value, receiver);if (success) {console.log('property ' + name + ' on ' + target + ' set to ' + value);}return success;}
});
上面代码中，Proxy方法拦截target对象的属性赋值行为。它采用Reflect.set方法将值赋值给对象的属性，确保完成原有的行为，然后再部署额外的功能。
静态方法
Reflect对象一共有 13 个静态方法。
- Reflect.apply(target, thisArg, args)
- Reflect.construct(target, args)
- Reflect.get(target, name, receiver)
- Reflect.set(target, name, value, receiver)
- Reflect.defineProperty(target, name, desc)
- Reflect.deleteProperty(target, name)
- Reflect.has(target, name)
- Reflect.ownKeys(target)
- Reflect.isExtensible(target)
- Reflect.preventExtensions(target)
- Reflect.getOwnPropertyDescriptor(target, name)
- Reflect.getPrototypeOf(target)
- Reflect.setPrototypeOf(target, prototype)
上面这些方法的作用，大部分与Object对象的同名方法的作用都是相同的，而且它与Proxy对象的方法是一一对应的。
阮一峰ES6入门读书笔记（十）：Proxy相关推荐
- 阮一峰ES6入门读书笔记（十六）：Moudle
阮一峰ES6入门读书笔记(十六):Moudle 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种.前者用于服务器,后者用于浏览器.ES6 在语言标准的层面上 ...
- 阮一峰ES6入门读书笔记（七）：运算符的拓展
阮一峰ES6入门读书笔记(七):运算符的拓展 1. 指数运算符 ES6新增了一个指数运算符(**). 2 ** 2 // 4 2 ** 3 // 8 这个运算符的一个特点是右结合,而不是常见的左结合. ...
- 阮一峰react入门笔记
1.造树.type=text/babel,逗号分离 2.jsx语法(遇到HTML标签(以 < 开头),就用HTML规则解析:遇到代码块(以 { 开头),就用JavaScript规则解析). 函 ...
- 阮一峰es6电子书_ES6理解进阶【大前端高薪训练营】
一:面向对象:类class 面向对象三大特性之封装 封装是面向对象的重要原则,它在代码中的体现主要是以下两点: 封装整体:把对象的属性和行为封装为一个整体,其中内部成员可以分为静态成员(也叫类成员)和 ...
- 主成分分析碎石图_ISLR读书笔记十九：主成分分析（PCA）
本文使用 Zhihu On VSCode 创作并发布 前面写的一些统计学习方法都是属于监督学习(supervised learning),这篇主成分分析(principal components an ...
- 计算机英语读书笔记,大学英文读书笔记范文英语读书笔记十篇带翻译.doc
大学英文读书笔记范文英语读书笔记十篇带翻译 My Room This is my room. Near the window there is a desk. I often do my homewo ...
- 图解HTTP读书笔记(十)
图解HTTP读书笔记(十) Web的攻击技术 HTTP协议本身并不存在安全性问题,因此协议本身几乎不会成为攻击对象.应用HTTP协议的服务器和客户端,以及运行在服务器上的Web应用资源才是攻击目标. ...
- QT Creator快速入门读书笔记：新建HelloWorld工程
窗口部件 QMainWindow是带有菜单栏和工具栏的主窗口类,QDialog是各种对话框的基类,QWidget类是所有用户界面对象的基类,被称为基础窗口部件.QWidget继承自QObject类和Q ...
- QT Creator快速入门读书笔记：窗口部件初探
QWidget基础窗口部件 Qt把没有嵌入到其他部件中的部件称为窗口,一般窗口都有边框和标题栏,就像程序中的widget和label一样.QMainWindow和大量的QDialog子类是最一般的窗口 ...
- js -- ES6（一）-- 简介（根据阮一峰ES6标准入门整理）
目前正在学习ES6,根据阮一峰的ES6入门2,学到哪更新到哪里,都是基本的知识,复杂的目前还不会,涉及的代码都是亲自运行过的,若发现错误请指正. ES6 提供了许多新特性,但是并不是所有的浏览器都能够 ...
最新文章
- 强化学习（五） - 时序差分学习(Temporal-Difference Learning)及其实例----Sarsa算法, Q学习, 期望Sarsa算法
- 人工智能基础-机器学习任务之常规解决的六大问题
- 覆盖与重载与隐藏——SAP电面（3）
- IBM HyperLedger fabric 详解
- java过滤器经典案例_JAVA语言基础的经典案例：猜字母游戏
- sql语句练习（三）：LeetCode
- Influxdb中Select查询请求结果涉及到的一些数据结构
- 近15亿元融资，够不够匹克“翻身”？
- 分布式Redis深度历险-复制
- 《推荐系统实践》算法纯享（附代码链接）（六）—— 借助社交网络推荐篇
- 好用的excel图片转表格的方法都在这了
- 喇叭POP爆破音产生的原因与解决办法
- 银行业务中台和阿里中台的异曲同工之妙
- Android利用jsoup爬虫爬网页数据（一）
- Python手册(Machine Learning)--statsmodels(列联表和多重插补)
- EPICS记录参考3 -- 所有记录都有的字段
- 在AWS上的架构部署与设计
- 厦大2021级期末上机考试
- 打印机服务器ip修改,打印机服务器ip设置
- Altium设置菜单之PCB编辑菜单