筆記，完全摘錄自阮一峰
proxy的概念
proxy英文原意是代理的意思所灸，在ES6中荧琼，可以翻譯為"代理器"譬胎。
它主要用于改變某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改命锄，所以屬于一種“元編程”（meta programming）堰乔，即對(duì)編程語(yǔ)言進(jìn)行編程。
proxy在目標(biāo)對(duì)象的外層搭建了一層攔截脐恩，外界對(duì)目標(biāo)對(duì)象的某些操作（后文會(huì)說(shuō)明镐侯，有哪些操作可以攔截），必須通過(guò)這層攔截驶冒。
語(yǔ)法
var proxy = new Proxy(target, handler);
通過(guò)構(gòu)造函數(shù)生成proxy苟翻，target參數(shù)是要攔截的目標(biāo)對(duì)象韵卤，handler參數(shù)也是一個(gè)對(duì)象，用來(lái)定制攔截行為袜瞬。
來(lái)看一個(gè)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);
}
});
一般將handle參數(shù)說(shuō)成配置對(duì)象怜俐，在配置對(duì)象中，可以定義需要攔截的操作邓尤。如果配置對(duì)象為空拍鲤，那么對(duì)proxy的操作將直通目標(biāo)對(duì)象。
注意：對(duì)proxy操作才有攔截效果汞扎，而不是目標(biāo)對(duì)象季稳。
Proxy實(shí)例的方法
配置對(duì)象中，可以攔截的操作
-
get(target, propKey, receiver)
get方法澈魄，攔截屬性的讀取操作景鼠。
對(duì)于不可配置（configurable），不可寫（writable）的屬性痹扇，不能被代理铛漓，通過(guò)Proxy訪問(wèn)會(huì)報(bào)錯(cuò)
下邊是幾個(gè)例子：
例子一：當(dāng)讀取不存在的屬性時(shí)候，拋出錯(cuò)誤而不是返回undefined
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 // 拋出一個(gè)錯(cuò)誤
例子二：攔截讀取繼承屬性
let proto = new Proxy({}, {
get(target, propertyKey, receiver) {
console.log('GET '+propertyKey);
return target[propertyKey];
}
});
let obj = Object.create(proto);
obj.xxx // "GET xxx"
例子三：數(shù)組讀取負(fù)數(shù)索引（負(fù)數(shù)索引表示倒著取數(shù)）
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
例子四：實(shí)現(xiàn)屬性的鏈?zhǔn)讲僮鳎▽傩缘淖x取轉(zhuǎn)換為執(zhí)行一個(gè)函數(shù)）
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
例子五：實(shí)現(xiàn)一個(gè)生成各種DOM節(jié)點(diǎn)的通用函數(shù)dom鲫构。這個(gè)例子感覺很好浓恶，以后就可以簡(jiǎn)單的創(chuàng)建dom節(jié)點(diǎn)了。
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);
set(target, propKey, value, receiver)
攔截屬性的賦值操作结笨，返回布爾值包晰。如果某個(gè)屬性，不可寫炕吸，不可配置伐憾，那么set不得改變這個(gè)屬性的值，只能返回同樣的值赫模，否則報(bào)錯(cuò)树肃。
一些應(yīng)用
例子一：實(shí)現(xiàn)數(shù)據(jù)的限制
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');
}
}
// 對(duì)于age以外的屬性，直接保存
obj[prop] = value;
}
};
let person = new Proxy({}, validator);
person.age = 100;
person.age // 100
person.age = 'young' // 報(bào)錯(cuò)
person.age = 300 // 報(bào)錯(cuò)
例子二：數(shù)據(jù)綁定嘴瓤，當(dāng)某些數(shù)據(jù)改變時(shí)候同步更新dom
例子三：防止內(nèi)部屬性“_”被外部讀寫（通常我們以下劃線開頭扫外，表示其實(shí)內(nèi)部屬性）
var handler = {
get (target, key) {
invariant(key, 'get');
return target[key];
},
set (target, key, value) {
invariant(key, 'set');
target[key] = value;
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
apply(target, object, args)
攔截——函數(shù)調(diào)用、call廓脆、apply操作
三個(gè)參數(shù)分別是：
1.目標(biāo)對(duì)象
2.目標(biāo)對(duì)象的上下文對(duì)象（this）
3.目標(biāo)對(duì)象的參數(shù)數(shù)組
一個(gè)例子：
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
-
has(target, propKey)
攔截HasProperty操作筛谚，即判斷對(duì)象是否具有某個(gè)屬性時(shí)，這個(gè)方法會(huì)生效停忿，典型的就是in操作符
如果原對(duì)象不可配置或者禁止擴(kuò)展驾讲，這時(shí)has攔截會(huì)報(bào)錯(cuò)。
值得注意的是，has方法攔截的是HasProperty操作吮铭，而不是HasOwnProperty操作时迫，即has方法不判斷一個(gè)屬性是對(duì)象自身的屬性，還是繼承的屬性谓晌。
例子一：使用has方法隱藏某些屬性掠拳，不被in 發(fā)現(xiàn)（這個(gè)例子是屏蔽了內(nèi)部屬性"_"，如果原對(duì)象的屬性名的第一個(gè)字符是下劃線纸肉，proxy.has就會(huì)返回false溺欧，從而不會(huì)被in運(yùn)算符發(fā)現(xiàn)。）
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
例子二：不對(duì)for...in...循環(huán)生效
let stu1 = {name: '張三', score: 59};
let stu2 = {name: '李四', 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);
'score' in oproxy1
// 張三 不及格
// false
'score' in oproxy2
// true
for (let a in oproxy1) {
console.log(oproxy1[a]);
}
// 張三
// 59
for (let b in oproxy2) {
console.log(oproxy2[b]);
}
// 李四
// 99
-
construct(target, args)
攔截new命令
兩個(gè)參數(shù)：目標(biāo)對(duì)象柏肪，構(gòu)造函數(shù)的參數(shù)對(duì)象
construct方法必須返回一個(gè)對(duì)象姐刁，否則會(huì)報(bào)錯(cuò)
一個(gè)例子：
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
-
deleteProperty(target, propKey)
攔截delete操作，如果這個(gè)方法拋出錯(cuò)誤烦味，或者返回false聂使，則當(dāng)前屬性就無(wú)法被delete命令刪除
注意，目標(biāo)對(duì)象自身的不可配置（configurable）的屬性谬俄，不能被deleteProperty方法刪除柏靶，否則報(bào)錯(cuò)。
例子：
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
-
dfineProperty(target, propKey, propDesc)
攔截object.defineProperty操作溃论。
注意宿礁，如果目標(biāo)對(duì)象不可擴(kuò)展（extensible），則defineProperty不能增加目標(biāo)對(duì)象上不存在的屬性蔬芥，否則會(huì)報(bào)錯(cuò)。另外控汉，如果目標(biāo)對(duì)象的某個(gè)屬性不可寫（writable）或不可配置（configurable）笔诵，則defineProperty方法不得改變這兩個(gè)設(shè)置。
一個(gè)例子：
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"'
getOwnPropertyDescriptor(target, propKey)
攔截object.getOwnPropertyDescriptor()姑子，返回一個(gè)屬性描述對(duì)象或者undefined
一個(gè)例子：
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 }
-
getPrototypeOf(target)
攔截以下操作 object.prototype.__proto__object.prototype.isPrototypeOf()object.getPrototypeOf()Reflect.getPrototypeOf()instanceof
必須返回一個(gè)對(duì)象或者null乎婿，否則報(bào)錯(cuò)。
如果目標(biāo)對(duì)象不可擴(kuò)展（extensible）街佑， getPrototypeOf方法必須返回目標(biāo)對(duì)象的原型對(duì)象谢翎。
一個(gè)例子：
var proto = {};
var p = new Proxy({}, {
getPrototypeOf(target) {
return proto;
}
});
Object.getPrototypeOf(p) === proto // true
-
isExtensible(target)
攔截object.isExtensible操作
該方法只能返回布爾值，否則值會(huì)被自動(dòng)轉(zhuǎn)換為布爾值沐旨。
該方法有一個(gè)強(qiáng)限制森逮，它的返回值必須與目標(biāo)對(duì)象的isExtensible屬性保持一致。否則會(huì)報(bào)錯(cuò)
一個(gè)例子
var p = new Proxy({}, {
isExtensible: function(target) {
console.log("called");
return true;
}
});
Object.isExtensible(p)
// "called"
// true
ownKeys(target)
攔截對(duì)象自身屬性的讀取操作磁携，具體攔截以下操作：
object.getOwnPropertyNames()object.getOwnPropertySymbols()object.keys()
注意：
ownKeys方法返回的數(shù)組成員褒侧，只能是字符串或 Symbol值。如果有其他類型的值，或者返回的根本不是數(shù)組闷供，就會(huì)報(bào)錯(cuò)烟央。
var obj = {};
var p = new Proxy(obj, {
ownKeys: function(target) {
return [123, true, undefined, null, {}, []];
}
});
Object.getOwnPropertyNames(p)
// Uncaught TypeError: 123 is not a valid property name
如果目標(biāo)獨(dú)享自身包含不可配置的屬性，則該屬性必須被ownKeys方法返回歪脏，否則報(bào)錯(cuò)
var obj = {};
Object.defineProperty(obj, 'a', {
configurable: false,
enumerable: true,
value: 10 }
);
var p = new Proxy(obj, {
ownKeys: function(target) {
return ['b'];
}
});
Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a'
如果目標(biāo)對(duì)象是不可擴(kuò)展的（non-extensition）疑俭，這時(shí)ownKeys方法返回的數(shù)組之中，必須包含原對(duì)象的所有屬性婿失，且不能包含多余的屬性钞艇，否則報(bào)錯(cuò)。
var obj = {
a: 1
};
Object.preventExtensions(obj);
var p = new Proxy(obj, {
ownKeys: function(target) {
return ['a', 'b'];
}
});
Object.getOwnPropertyNames(p)
// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible
下邊是例子
例子一：攔截object.keys()方法
let target = {
a: 1,
b: 2,
c: 3
};
let handler = {
ownKeys(target) {
return ['a'];
}
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
// [ 'a' ]
例子二：攔截第一個(gè)字符為下劃線的屬性名
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"
注意移怯，使用Object.keys方法時(shí)香璃，有三類屬性會(huì)被ownKeys方法自動(dòng)過(guò)濾，不會(huì)返回舟误。
- 目標(biāo)對(duì)象上不存在的屬性
- 屬性名為 Symbol 值
- 不可遍歷（enumerable）的屬性
let target = {
a: 1,
b: 2,
c: 3,
[Symbol.for('secret')]: '4',
};
Object.defineProperty(target, 'key', {
enumerable: false,
configurable: true,
writable: true,
value: 'static'
});
let handler = {
ownKeys(target) {
return ['a', 'd', Symbol.for('secret'), 'key'];
}
};
let proxy = new Proxy(target, handler);
Object.keys(proxy)
// ['a']
preventExtensions(target)
攔截object.preventExtensions()返回布爾值葡秒，否則會(huì)被自動(dòng)轉(zhuǎn)化為布爾值。
這個(gè)方法有一個(gè)限制嵌溢，只有目標(biāo)對(duì)象不可擴(kuò)展時(shí)（即Object.isExtensible(proxy)為false）眯牧，proxy.preventExtensions才能返回true，否則會(huì)報(bào)錯(cuò)赖草。
var p = new Proxy({}, {
preventExtensions: function(target) {
return true;
}
});
Object.preventExtensions(p) // 報(bào)錯(cuò)
上面代碼中学少，proxy.preventExtensions方法返回true，但這時(shí)Object.isExtensible(proxy)會(huì)返回true秧骑，因此報(bào)錯(cuò)版确。
為了防止出現(xiàn)這個(gè)問(wèn)題，通常要在proxy.preventExtensions方法里面乎折，調(diào)用一次Object.preventExtensions绒疗。
var p = new Proxy({}, {
preventExtensions: function(target) {
console.log('called');
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(p)
// "called"
// true
-
setPrototypeOf(target, proto)
攔截ovject.setPrototypeOf方法
只能返回布爾值，否則自動(dòng)轉(zhuǎn)化骂澄。
如果目標(biāo)對(duì)象不可擴(kuò)展（extensible）吓蘑，setPrototypeOf方法不得改變目標(biāo)對(duì)象的原型。
var handler = {
setPrototypeOf (target, proto) {
throw new Error('Changing the prototype is forbidden');
}
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden
Proxy.revocable()
Proxy.revocable方法返回一個(gè)可取消的 Proxy 實(shí)例坟冲。
let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke();
proxy.foo // TypeError: Revoked
Proxy.revocable方法返回一個(gè)對(duì)象磨镶，該對(duì)象的proxy屬性是Proxy實(shí)例，revoke屬性是一個(gè)函數(shù)健提，可以取消Proxy實(shí)例琳猫。上面代碼中，當(dāng)執(zhí)行revoke函數(shù)之后私痹，再訪問(wèn)Proxy實(shí)例沸移，就會(huì)拋出一個(gè)錯(cuò)誤痪伦。
Proxy.revocable的一個(gè)使用場(chǎng)景是，目標(biāo)對(duì)象不允許直接訪問(wèn)雹锣，必須通過(guò)代理訪問(wèn)网沾，一旦訪問(wèn)結(jié)束，就收回代理權(quán)蕊爵，不允許再次訪問(wèn)辉哥。
this 問(wèn)題
雖然 Proxy 可以代理針對(duì)目標(biāo)對(duì)象的訪問(wèn)，但它不是目標(biāo)對(duì)象的透明代理攒射，即不做任何攔截的情況下醋旦，也無(wú)法保證與目標(biāo)對(duì)象的行為一致。主要原因就是在 Proxy 代理的情況下会放，目標(biāo)對(duì)象內(nèi)部的this關(guān)鍵字會(huì)指向 Proxy 代理饲齐。
const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.m() // false
proxy.m() // true
下面是一個(gè)例子，由于this指向的變化咧最，導(dǎo)致 Proxy 無(wú)法代理目標(biāo)對(duì)象捂人。
const _name = new WeakMap();
class Person {
constructor(name) {
_name.set(this, name);
}
get name() {
return _name.get(this);
}
}
const jane = new Person('Jane');
jane.name // 'Jane'
const proxy = new Proxy(jane, {});
proxy.name // undefined
上面代碼中，目標(biāo)對(duì)象jane的name屬性矢沿，實(shí)際保存在外部WeakMap對(duì)象_name上面滥搭，通過(guò)this鍵區(qū)分。由于通過(guò)proxy.name訪問(wèn)時(shí)捣鲸，this指向proxy瑟匆，導(dǎo)致無(wú)法取到值，所以返回undefined栽惶。
此外愁溜，有些原生對(duì)象的內(nèi)部屬性，只有通過(guò)正確的this才能拿到外厂，所以 Proxy 也無(wú)法代理這些原生對(duì)象的屬性祝谚。
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();
// TypeError: this is not a Date object.
上面代碼中，getDate方法只能在Date對(duì)象實(shí)例上面拿到酣衷，如果this不是Date對(duì)象實(shí)例就會(huì)報(bào)錯(cuò)。這時(shí)次泽，this綁定原始對(duì)象穿仪，就可以解決這個(gè)問(wèn)題。
const target = new Date('2015-01-01');
const handler = {
get(target, prop) {
if (prop === 'getDate') {
return target.getDate.bind(target);
}
return Reflect.get(target, prop);
}
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1
實(shí)例：web服務(wù)的客戶端
Proxy 對(duì)象可以攔截目標(biāo)對(duì)象的任意屬性意荤，這使得它很合適用來(lái)寫 Web 服務(wù)的客戶端啊片。
const service = createWebService('http://example.com/data');
service.employees().then(json => {
const employees = JSON.parse(json);
// ···
});
上面代碼新建了一個(gè) Web 服務(wù)的接口，這個(gè)接口返回各種數(shù)據(jù)玖像。Proxy 可以攔截這個(gè)對(duì)象的任意屬性紫谷，所以不用為每一種數(shù)據(jù)寫一個(gè)適配方法，只要寫一個(gè) Proxy 攔截就可以了。
function createWebService(baseUrl) {
return new Proxy({}, {
get(target, propKey, receiver) {
return () => httpGet(baseUrl+'/' + propKey);
}
});
}
同理笤昨，Proxy 也可以用來(lái)實(shí)現(xiàn)數(shù)據(jù)庫(kù)的 ORM 層祖驱。
