本文共 8458 字，大约阅读时间需要 28 分钟。
Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。
Proxy：
一个 Proxy 对象由两个部分组成： target 、 handler 。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。let target = { name: 'Tom', age: 24}let handler = { get: function(target, key) { console.log('getting '+key); return target[key]; // 不是target.key }, set: function(target, key, value) { console.log('setting '+key); target[key] = value; }}let proxy = new Proxy(target, handler)proxy.name // 实际执行 handler.getproxy.age = 25 // 实际执行 handler.set// getting name// setting age// 25 // target 可以为空对象let targetEpt = { }let proxyEpt = new Proxy(targetEpt, handler)// 调用 get 方法，此时目标对象为空，没有 name 属性proxyEpt.name // getting name// 调用 set 方法，向目标对象中添加了 name 属性proxyEpt.name = 'Tom'// setting name// "Tom"// 再次调用 get ，此时已经存在 name 属性proxyEpt.name// getting name// "Tom" // 通过构造函数新建实例时其实是对目标对象进行了浅拷贝，因此目标对象与代理对象会互相// 影响targetEpt)// {name: "Tom"} // handler 对象也可以为空，相当于不设置拦截操作，直接访问目标对象let targetEmpty = { }let proxyEmpty = new Proxy(targetEmpty,{ })proxyEmpty.name = "Tom"targetEmpty) // {name: "Tom"} get(target, propKey, receiver)
用于 target 对象上 propKey 的读取操作。
let exam ={ name: "Tom", age: 24}let proxy = new Proxy(exam, { get(target, propKey, receiver) { console.log('Getting ' + propKey); return target[propKey]; }})proxy.name // Getting name// "Tom" get() 方法可以继承。
let proxy = new Proxy({ }, { get(target, propKey, receiver) { // 实现私有属性读取保护 if(propKey[0] === '_'){ throw new Erro(`Invalid attempt to get private "${ propKey}"`); } console.log('Getting ' + propKey); return target[propKey]; }}); let obj = Object.create(proxy);obj.name// Getting name set(target, propKey, value, receiver)
用于拦截 target 对象上的 propKey 的赋值操作。如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。
let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { throw new TypeError('The age is not an integer'); } if (value > 200) { throw new RangeError('The age seems invalid'); } } // 对于满足条件的 age 属性以及其他属性，直接保存 obj[prop] = value; }};let proxy= new Proxy({ }, validator)proxy.age = 100;proxy.age // 100proxy.age = 'oppps' // 报错proxy.age = 300 // 报错 第四个参数 receiver 表示原始操作行为所在对象，一般是 Proxy 实例本身。
const handler = { set: function(obj, prop, value, receiver) { obj[prop] = receiver; }};const proxy = new Proxy({ }, handler);proxy.name= 'Tom';proxy.name=== proxy // true const exam = { }Object.setPrototypeOf(exam, proxy)exam.name = "Tom"exam.name === exam // true 注意，严格模式下，set代理如果没有返回true，就会报错。
apply(target, ctx, args)
用于拦截函数的调用、call 和 reply 操作。target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。
function sub(a, b){ return a - b;}let handler = { apply: function(target, ctx, args){ console.log('handle apply'); return Reflect.apply(...arguments); }}let proxy = new Proxy(sub, handler)proxy(2, 1) // handle apply// 1 has(target, propKey)
用于拦截 HasProperty 操作，即在判断 target 对象是否存在 propKey 属性时，会被这个方法拦截。此方法不判断一个属性是对象自身的属性，还是继承的属性。
let handler = { has: function(target, propKey){ console.log("handle has"); return propKey in target; }}let exam = { name: "Tom"}let proxy = new Proxy(exam, handler)'name' in proxy// handle has// true 注意：此方法不拦截 for … in 循环。
construct(target, args)
用于拦截 new 命令。返回值必须为对象。
let handler = { construct: function (target, args, newTarget) { console.log('handle construct') return Reflect.construct(target, args, newTarget) }}class Exam { constructor (name) { this.name = name }}let ExamProxy = new Proxy(Exam, handler)let proxyObj = new ExamProxy('Tom')console.log(proxyObj)// handle construct// exam {name: "Tom"} deleteProperty(target, propKey)
用于拦截 delete 操作，如果这个方法抛出错误或者返回 false ，propKey 属性就无法被 delete 命令删除。
defineProperty(target, propKey, propDesc)
用于拦截 Object.definePro若目标对象不可扩展，增加目标对象上不存在的属性会报错；若属性不可写或不可配置，则不能改变这些属性。
let handler = { defineProperty: function(target, propKey, propDesc){ console.log("handle defineProperty"); return true; }}plet target = { }let proxy = new Proxy(target, handler)proxy.name = "Tom"// handle definePropertytarget// {name: "Tom"} // defineProperty 返回值为false，添加属性操作无效let handler1 = { defineProperty: function(target, propKey, propDesc){ console.log("handle defineProperty"); return false; }}let target1 = { }let proxy1 = new Proxy(target1, handler1)proxy1.name = "Jerry"target1// {} erty 操作
getOwnPropertyDescriptor(target, propKey)
用于拦截 Object.getOwnPropertyD() 返回值为属性描述对象或者 undefined 。
let handler = { getOwnPropertyDescriptor: function(target, propKey){ return Object.getOwnPropertyDescriptor(target, propKey); }}let target = { name: "Tom"}let proxy = new Proxy(target, handler)Object.getOwnPropertyDescriptor(proxy, 'name')// {value: "Tom", writable: true, enumerable: true, configurable: // true} ptor 属性
getPrototypeOf(target)
主要用于拦截获取对象原型的操作。包括以下操作：
- Object.prototype._proto_- Object.prototype.isPrototypeOf()- Object.getPrototypeOf()- Reflect.getPrototypeOf()- instanceof
let exam = { }let proxy = new Proxy({ },{ getPrototypeOf: function(target){ return exam; }})Object.getPrototypeOf(proxy) // {} 注意，返回值必须是对象或者 null ，否则报错。另外，如果目标对象不可扩展（non-extensible），getPrototypeOf 方法必须返回目标对象的原型对象。
let proxy = new Proxy({ },{ getPrototypeOf: function(target){ return true; }})Object.getPrototypeOf(proxy)// TypeError: 'getPrototypeOf' on proxy: trap returned neither object // nor null isExtensible(target)
用于拦截 Object.isExtensible 操作。
该方法只能返回布尔值，否则返回值会被自动转为布尔值。
let proxy = new Proxy({ },{ isExtensible:function(target){ return true; }})Object.isExtensible(proxy) // true 注意：它的返回值必须与目标对象的isExtensible属性保持一致，否则会抛出错误。
let proxy = new Proxy({ },{ isExtensible:function(target){ return false; }})Object.isExtensible(proxy)// TypeError: 'isExtensible' on proxy: trap result does not reflect // extensibility of proxy target (which is 'true') ownKeys(target)
用于拦截对象自身属性的读取操作。主要包括以下操作：
- Object.getOwnPropertyNames()- Object.getOwnPropertySymbols()- Object.keys()- or...in
方法返回的数组成员，只能是字符串或 Symbol 值，否则会报错。
若目标对象中含有不可配置的属性，则必须将这些属性在结果中返回，否则就会报错。
若目标对象不可扩展，则必须全部返回且只能返回目标对象包含的所有属性，不能包含不存在的属性，否则也会报错。
let proxy = new Proxy( { name: "Tom", age: 24}, { ownKeys(target) { return ['name']; }});Object.keys(proxy)// [ 'name' ]f返回结果中，三类属性会被过滤：// - 目标对象上没有的属性// - 属性名为 Symbol 值的属性// - 不可遍历的属性 let target = { name: "Tom", [Symbol.for('age')]: 24,};// 添加不可遍历属性 'gender'Object.defineProperty(target, 'gender', { enumerable: false, configurable: true, writable: true, value: 'male'});let handler = { ownKeys(target) { return ['name', 'parent', Symbol.for('age'), 'gender']; }};let proxy = new Proxy(target, handler);Object.keys(proxy)// ['name'] preventExtensions(target)
拦截 Object.preventExtensions 操作。
该方法必须返回一个布尔值，否则会自动转为布尔值。
// 只有目标对象不可扩展时（即 Object.isExtensible(proxy) 为 false ），// proxy.preventExtensions 才能返回 true ，否则会报错var proxy = new Proxy({ }, { preventExtensions: function(target) { return true; }});// 由于 proxy.preventExtensions 返回 true，此处也会返回 true，因此会报错Object.preventExtensions(proxy) 被// TypeError: 'preventExtensions' on proxy: trap returned truish but // the proxy target is extensible // 解决方案 var proxy = new Proxy({ }, { preventExtensions: function(target) { // 返回前先调用 Object.preventExtensions Object.preventExtensions(target); return true; }});Object.preventExtensions(proxy)// Proxy {} setPrototypeOf
主要用来拦截 Object.setPrototypeOf 方法。
返回值必须为布尔值，否则会被自动转为布尔值。
若目标对象不可扩展，setPrototypeOf 方法不得改变目标对象的原型。
let proto = { }let proxy = new Proxy(function () { }, { setPrototypeOf: function(target, proto) { console.log("setPrototypeOf"); return true; }});Object.setPrototypeOf(proxy, proto);// setPrototypeOf Proxy.revocable()
用于返回一个可取消的 Proxy 实例。
let { proxy, revoke} = Proxy.revocable({ }, { });proxy.name = "Tom";revoke();proxy.name // TypeError: Cannot perform 'get' on a proxy that has been revoked 转载地址：http://gxsqb.baihongyu.com/