1 get()
get方法用于拦截某个属性的读取操作。 上文已经有一个例子， 下面是另一个拦截读取操作的例子。
var person = { name: " 张三 " }; var proxy = new Proxy(person, { get: function(target, property) { if(property in target) { return target[property]; } else { throw new ReferenceError("Property \"" + property + "\" does not exist."); } } }); proxy.name // " 张三 " proxy.age // 抛出一个错误上面代码表示， 如果访问目标对象不存在的属性， 会抛出一个错误。 如果没有这个拦截函数， 访问不存在的属性， 只会返回undefined。 get方法可以继承。 let proto = new Proxy({}, { get(target, propertyKey, receiver) { console.log('GET ' + propertyKey); return target[propertyKey]; } }); let obj = Object.create(proto); obj.xxx // "GET xxx"上面代码中， 拦截操作定义在 Prototype 对象上面， 所以如果读取obj对象继承的属性时， 拦截会生效。 下面的例子使用get拦截， 实现数组读取负数的索引。 function createArray(...elements) { let handler = { get(target, propKey, receiver) { let index = Number(propKey); if(index < 0) { propKey = String(target.length + index); } return Reflect.get(target, propKey, receiver); } }; let target = []; target.push(...elements); return new Proxy(target, handler); } let arr = createArray('a', 'b', 'c'); arr[-1] // c上面代码中， 数组的位置参数是 - 1， 就会输出数组的倒数最后一个成员。 利用 Proxy， 可以将读取属性的操作（ get）， 转变为执行某个函数， 从而实现属性的链式操作。 var pipe = (function() { return function(value) { var funcStack = []; var oproxy = new Proxy({}, { get: function(pipeObject, fnName) { if(fnName === 'get') { return funcStack.reduce(function(val, fn) { return fn(val); }, value); } funcStack.push(window[fnName]); return oproxy; } }); return oproxy; } }()); var double = n => n * 2; var pow = n => n * n; var reverseInt = n => n.toString().split("").reverse().join("") | 0; pipe(3).double.pow.reverseInt.get; // 63上面代码设置 Proxy 以后， 达到了将函数名链式使用的效果。 下面的例子则是利用get拦截， 实现一个生成各种 DOM 节点的通用函数dom。 const dom = new Proxy({}, { get(target, property) { return function(attrs = {}, ...children) { const el = document.createElement(property); for(let prop of Object.keys(attrs)) { el.setAttribute(prop, attrs[prop]); } for(let child of children) { if(typeof child === 'string') { child = document.createTextNode(child); } el.appendChild(child); } return el; } } }); const el = dom.div({}, 'Hello, my name is ', dom.a({ href: '//example.com' }, 'Mark'), '. I like:', dom.ul({}, dom.li({}, 'The web'), dom.li({}, 'Food'), dom.li({}, '…actually that\'s it') ) ); document.body.appendChild(el); 2 set()set方法用来拦截某个属性的赋值操作。假定Person对象有一个age属性， 该属性应该是一个不大于 200 的整数， 那么可以使用Proxy保证age的属性值符合要求。
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 person = new Proxy({}, validator); person.age = 100; person.age // 100 person.age = 'young' // 报错 person.age = 300 // 报错上面代码中， 由于设置了存值函数set， 任何不符合要求的age属性赋值， 都会抛出一个错误。 利用set方法， 还可以数据绑定， 即每当对象发生变化时， 会自动更新 DOM。 有时， 我们会在对象上面设置内部属性， 属性名的第一个字符使用下划线开头， 表示这些属性不应该被外部使用。 结合get和set方法， 就可以做到防止这些内部属性被外部读写。 var handler = { get(target, key) { invariant(key, 'get'); return target[key]; }, set(target, key, value) { invariant(key, 'set'); return true; } }; function invariant(key, action) { if(key[0] === '_') { throw new Error(`Invalid attempt to ${action} private "${key}" property`); } } var target = {}; var proxy = new Proxy(target, handler); proxy._prop // Error: Invalid attempt to get private "_prop" property proxy._prop = 'c' // Error: Invalid attempt to set private "_prop" property // Error: Invalid attempt to set private "_prop" property上面代码中， 只要读写的属性名的第一个字符是下划线， 一律抛错， 从而达到禁止读写内部属性的目的。3 apply()
apply方法拦截函数的调用、 call 和 apply 操作。
var handler = { apply(target, ctx, args) { return Reflect.apply(...arguments); } };apply方法可以接受三个参数， 分别是目标对象、 目标对象的上下文对象（ this） 和目标对象的参数数组。 下面是一个例子。 var target = function() { return 'I am the target'; }; var handler = { apply: function() { return 'I am the proxy'; } }; var p = new Proxy(target, handler); p() // "I am the proxy"上面代码中， 变量p是 Proxy 的实例， 当它作为函数调用时（ p()）， 就会被apply方法拦截， 返回一个字符串。 下面是另外一个例子。 var twice = { apply(target, ctx, args) { return Reflect.apply(...arguments) * 2; } }; function sum(left, right) { return left + right; }; var proxy = new Proxy(sum, twice); proxy(1, 2) // 6 proxy.call(null, 5, 6) // 22 proxy.apply(null, [7, 8]) // 30上面代码中， 每当执行proxy函数（ 直接调用或call和apply调用）， 就会被apply方法拦截。 另外， 直接调用Reflect.apply方法， 也会被拦截。 Reflect.apply(proxy, null, [9, 10]) // 38 4 has()has方法用来拦截HasProperty操作， 即判断对象是否具有某个属性时， 这个方法会生效。 典型的操作就是in运算符。下面的例子使用has方法隐藏某些属性， 不被in运算符发现。
var handler = { has(target, key) { if(key[0] === '_') { return false; } return key in target; } }; var target = { _prop: 'foo', prop: 'foo' }; var proxy = new Proxy(target, handler); '_prop' in proxy // false上面代码中， 如果原对象的属性名的第一个字符是下划线， proxy.has就会返回false， 从而不会被in运算符发现。 如果原对象不可配置或者禁止扩展， 这时has拦截会报错。 var obj = { a: 10 }; Object.preventExtensions(obj); var p = new Proxy(obj, { has: function(target, prop) { return false; } }); 'a' in p // TypeError is thrown上面代码中， obj对象禁止扩展， 结果使用has拦截就会报错。 值得注意的是， has方法拦截的是HasProperty操作， 而不是HasOwnProperty操作， 即has方法不判断一个属性是对象自身的属性， 还是继承的属性。 由于for...in操作内部也会用到HasProperty操作， 所以has方法在for...in循环时也会生效。 let stu1 = { name: 'Owen', score: 59 }; let stu2 = { name: 'Mark', score: 99 }; let handler = { has(target, prop) { if(prop === 'score' && target[prop] < 60) { console.log(`${target.name} 不及格 `); return false; } return prop in target; } } let oproxy1 = new Proxy(stu1, handler); let oproxy2 = new Proxy(stu2, handler); for(let a in oproxy1) { console.log(oproxy1[a]); } // Owen // Owen 不及格 for(let b in oproxy2) { console.log(oproxy2[b]); } // Mark // Mark 99上面代码中，for...in循环时， has拦截会生效， 导致不符合要求的属性被排除在for...in循环之外。5 construct()
construct方法用于拦截new命令， 下面是拦截对象的写法。
var handler = { construct(target, args, newTarget) { return new target(...args); } };construct方法可以接受两个参数。 target: 目标对象 args： 构建函数的参数对象 下面是一个例子。 var p = new Proxy(function() {}, { construct: function(target, args) { console.log('called: ' + args.join(', ')); return { value: args[0] * 10 }; } }); new p(1).value // "called: 1" // 10 construct方法返回的必须是一个对象， 否则会报错。 var p = new Proxy(function() {}, { construct: function(target, argumentsList) { return 1; } }); new p() // 报错 6 deleteProperty() var handler = { deleteProperty(target, key) { invariant(key, 'delete'); return true; } }; function invariant(key, action) { if(key[0] === '_') { throw new Error(`Invalid attempt to ${action} private "${key}" property`); } } var target = { _prop: 'foo' }; var proxy = new Proxy(target, handler); delete proxy._prop // Error: Invalid attempt to delete private "_prop" property上面代码中， deleteProperty方法拦截了delete操作符， 删除第一个字符为下划线的属性会报错。7 defineProperty()
defineProperty方法拦截了Object.defineProperty操作。
var handler = { defineProperty(target, key, descriptor) { return false; } }; var target = {}; var proxy = new Proxy(target, handler); proxy.foo = 'bar' // TypeError: proxy defineProperty handler returned false for property '"foo"'上面代码中， defineProperty方法返回false， 导致添加新属性会抛出错误。8 getOwnPropertyDescriptor()
getOwnPropertyDescriptor方法拦截Object.getOwnPropertyDescriptor， 返回一个属性描述对象或者undefined。
var handler = { getOwnPropertyDescriptor(target, key) { if(key[0] === '_') { return; } return Object.getOwnPropertyDescriptor(target, key); } }; var target = { _foo: 'bar', baz: 'tar' }; var proxy = new Proxy(target, handler); Object.getOwnPropertyDescriptor(proxy, 'wat') // undefined Object.getOwnPropertyDescriptor(proxy, '_foo') // undefined Object.getOwnPropertyDescriptor(proxy, 'baz') // { value: 'tar', writable: true, enumerable: true, configurable: true }上面代码中， handler.getOwnPropertyDescriptor方法对于第一个字符为下划线的属性名会返回undefined。9 getPrototypeOf()
getPrototypeOf方法主要用来拦截Object.getPrototypeOf() 运算符， 以及其他一些操作。
Object.prototype.__proto__ Object.prototype.isPrototypeOf() Object.getPrototypeOf() Reflect.getPrototypeOf()instanceof运算符 下面是一个例子。 var proto = {}; var p = new Proxy({}, { getPrototypeOf(target) { return proto; } }); Object.getPrototypeOf(p) === proto // true上面代码中， getPrototypeOf方法拦截Object.getPrototypeOf()， 返回proto对象。10 isExtensible()
isExtensible方法拦截Object.isExtensible操作。
var p = new Proxy({}, { isExtensible: function(target) { console.log("called"); return true; } }); Object.isExtensible(p) // "called" // true上面代码设置了isExtensible方法， 在调用Object.isExtensible时会输出called。 这个方法有一个强限制， 如果不能满足下面的条件， 就会抛出错误。 Object.isExtensible(proxy) === Object.isExtensible(target) //下面是一个例子。 var p = new Proxy({}, { isExtensible: function(target) { return false; } }); Object.isExtensible(p) // 报错 11 ownKeys()ownKeys方法用来拦截Object.keys() 操作。
let target = {}; let handler = { ownKeys(target) { return ['hello', 'world']; } }; let proxy = new Proxy(target, handler); Object.keys(proxy) // [ 'hello', 'world' ]上面代码拦截了对于target对象的Object.keys() 操作， 返回预先设定的数组。 下面的例子是拦截第一个字符为下划线的属性名。 let target = { _bar: 'foo', _prop: 'bar', prop: 'baz' }; let handler = { ownKeys(target) { return Reflect.ownKeys(target).filter(key => key[0] !== '_'); } }; let proxy = new Proxy(target, handler); for(let key of Object.keys(proxy)) { console.log(target[key]); } // "baz" 12 preventExtensions()preventExtensions方法拦截Object.preventExtensions()。 该方法必须返回一个布尔值。这个方法有一个限制， 只有当Object.isExtensible(proxy) 为false（ 即不可扩展） 时， proxy.preventExtensions才能返回true， 否则会报错。
var p = new Proxy({}, { preventExtensions: function(target) { return true; } }); Object.preventExtensions(p) // 报错上面代码中， proxy.preventExtensions方法返回true， 但这时Object.isExtensible(proxy) 会返回true， 因此报错。 为了防止出现这个问题， 通常要在proxy.preventExtensions方法里面， 调用一次Object.preventExtensions。 var p = new Proxy({}, { preventExtensions: function(target) { console.log("called"); Object.preventExtensions(target); return true; } }); Object.preventExtensions(p) // "called" // true 13 setPrototypeOf()setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法。下面是一个例子。
var handler = { setPrototypeOf(target, proto) { throw new Error('Changing the prototype is forbidden'); } }; var proto = {}; var target = function() {}; var proxy = new Proxy(target, handler); proxy.setPrototypeOf(proxy, proto); // Error: Changing the prototype is forbidden上面代码中， 只要修改target的原型对象， 就会报错。