前不久換工作的時(shí)候面試某大廠被問到關(guān)于Proxy的問題柑晒，腦子里有點(diǎn)印象但是又說不出具體使用方法，主要還是自己平時(shí)積累不夠涌庭，所以趕緊來惡補(bǔ)一下。
Metaprogramming
- 正式開始之前席镀，先一起來理解下什么是Metaprogramming（元編程），因?yàn)镻roxy就是一種基于Metaprogramming概念的對象 ，維基百科上這樣解釋：
Metaprogramming is a programming technique in which computer programs have the ability to treat other programs as their data.
- 翻譯過來就是
元編程就是可以使用其他程序來作為輸入數(shù)據(jù)的一種編程技術(shù)
Proxy
Proxy wraps objects and intercepts their behavior through traps
The Proxy object is used to define custom behavior for fundamental operations (e.g. property lookup, assignment, enumeration, function invocation, etc).
簡單說來就是Proxy可以用來改變對象的默認(rèn)操作专肪，比如自行定義set和get等荔仁，常用的有以下這些：
- apply
- construct
- defineProperty
- deleteProperty
- get
- getOwnPropertyDescriptor
- getPrototypeOf
- has
- isExtensible
- ownKeys
- preventExtensions
- set
- setPrototypeOf
Proxy中需要理解的三個(gè)屬性：
- target: an Object which the proxy virtualizes.（目標(biāo)對象）
- handler: a Placeholder Object which contains traps.（包含重寫方法的對象）
- trap: the Methods that provide property access of the target object.（重寫的方法，比如get和set）
例子
新建一個(gè)Proxy對象
let p = new Proxy(target, handler);
新建一個(gè)employee對象然后輸出其中的一些屬性
const employee = {
firstName: 'Tapas',
lastName: 'Adhikary'
};
console.group('employee');
console.log(employee.firstName);
console.log(employee.lastName);
console.log(employee.org);
console.log(employee.fullName);
console.groupEnd()
上面的輸出如下所示：
employee
Tapas
Adhikary
undefined
undefined
接下來使用Proxy來更改一些默認(rèn)行為：
- 第一步 新建一個(gè)使用trap的handler
以下是一個(gè)覆蓋get方法的handler落萎，當(dāng)target中取不到相應(yīng)的fieldName時(shí)翔脱，你可以自定義輸出:
let handler = {
get: function(target, fieldName) {
if(fieldName === 'fullName' ) {
return `${target.firstName} ${target.lastName}`;
}
return fieldName in target ?
target[fieldName] :
`No such property as, '${fieldName}'!`
}
};
- 第二步 新建一個(gè)Proxy對象，并把之前定義的employee作為target傳入
let p = new Proxy(employee, handler);
- 第三步 輸出p的屬性
console.group('proxy');
console.log(p.firstName);
console.log(p.lastName);
console.log(p.org);
console.log(p.fullName);
console.groupEnd()
然后就可以看到輸出結(jié)果和之前不一樣了，期望結(jié)果與實(shí)際結(jié)果如下所示：
proxy
Tapas
Adhikary
No such property as, 'org'!
Tapas Adhikary
現(xiàn)在再登，清楚Proxy的作用了吧梯嗽，其實(shí)就是用來更改對象默認(rèn)方法的。
下面是改變set方法來實(shí)現(xiàn)一個(gè)驗(yàn)證的例子：
新建一個(gè)handler炎疆，重新命名為validator：
const validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if(!Number.isInteger(value)) {
throw new TypeError('Age is always an Integer, Please Correct it!');
}
if(value < 0) {
throw new TypeError('This is insane, a negative age?');
}
}
}
};
然后再新建一個(gè)Proxy：
let pr = new Proxy(employee, validator);
然后可以嘗試設(shè)置一個(gè)不合法的屬性缝左，比如：
pr.age = "test"挪钓；
你將會得到如下報(bào)錯：
Uncaught TypeError: Age is always an Integer, Please Correct it!
at Object.set (<anonymous>:5:23)
at <anonymous>:1:7
set @ VM2381:5
(anonymous) @ VM2434:1
或者：
pr.age = -1；
結(jié)果：
Uncaught TypeError: This is insane, a negative age?
at Object.set (<anonymous>:8:23)
at <anonymous>:1:7
set @ VM2381:8
(anonymous) @ VM2531:1
由上可見绍赛，Proxy的功能還是很強(qiáng)大也非常實(shí)用纯出，常用應(yīng)用場景有：
- 保護(hù)ID字段不受刪除（重寫deleteProperty）
- 取值和寫值（數(shù)據(jù)綁定）（重寫get，set）
- 改變 in 操作的默認(rèn)行為等
this指向
- 需要注意的是陨收，proxy會改變target中的this指向，一旦proxy代理了target饵骨，target內(nèi)部的this則指向了proxy，而不是target。
const target = {
get: function () {
console.log(this === proxy);
}
};
const handler = {};
const proxy = new Proxy(target, handler);
target.get() // false
proxy.get() // true
而有些原生對象的內(nèi)部屬性息堂，只有通過正確的this才能拿到，所以proxy也無法代理這些原生對象的屬性。
const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate();
// TypeError: this is not a Date object.
對于以上的代碼斋扰，getDate方法只能在Date對象的實(shí)例上面拿到宏娄，如果this不是Date就會報(bào)錯。可以通過this綁定原始對象來解決這個(gè)問題筷畦。
const target = new Date('2019-07-11');
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() // 11
這里又引入了另一個(gè)ES6的新增的對象Reflect攘滩，Reflect對象就是用來獲取對象中默認(rèn)方法的蚤假，這個(gè)下篇文章再具體討論。
總結(jié)
Proxy可以用于更改方法的默認(rèn)輸出伺通，比如get方法取不到值時(shí)不返回undefined弓柱，以及在set方法上加驗(yàn)證及數(shù)據(jù)綁定等等俊犯，很強(qiáng)大也有用，需熟練掌握。
參考
Tapas Adhikary
Proxy - JavaScript | MDN
http://es6.ruanyifeng.com/#docs/proxy
