Proxy（代理） & （映射）
Proxy 是在對象之前設(shè)置一層“攔截”。外面對該對象的訪問，都要先通過這層攔截，可以對外界的訪問進行過濾和改寫操作。用在這里表示由它來“代理”某些操作，可以譯為“代理器”。
語法和基本使用
語法
const p = new Proxy(target, handler)
// const p = new Proxy(目標對象, 處理程序)
基本使用
現(xiàn)只說 get 和 set 方法
let data = {
name: "ccc"
}
let proxyData = new Proxy(data,{
get (target, propKey, receiver) {
console.log(target, propKey, receiver)
// 打印出 data, 要讀取的屬性, proxyData
return Reflect.get(target, propKey); // 等同于 return target[propKey]
},
set (target, propKey, value, receiver) {
console.log(target, propKey, value, receiver)
// 打印出 data, 要設(shè)置的屬性, 設(shè)置屬性的屬性值, proxyData
Reflect.set(target, propKey, value); // 等同于 target[propKey] = value
}
})
使用 Proxy 對比 Object.defineProperty 不止可以監(jiān)聽對象還可以監(jiān)聽數(shù)組的變化
let data = []
let proxyData = new Proxy(data,{
get (target, propKey, receiver) {
return Reflect.get(target, propKey);
},
set (target, propKey, value, receiver) {
console.log('你進行操作了')
Reflect.set(target, propKey, value);
}
})
data[0] = 10; // 會打印出 你進行操作了
簡單的模擬雙向綁定
在上篇我在記 Object.defineProperty 的時候，簡單模擬的雙向綁定，這次用 Proxy 來模擬一下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id='inputDemo'/>
<div id="txt"></div>
</body>
<script>
inputDemo.oninput = function(){
data.box.name.nameData = this.value;
}
function upData (){
txt.innerText = data.box.name.nameData;
}
function Observer (obj) {
if(typeof obj == 'object') {
// 循環(huán)下層判斷是不是對象
Object.keys(obj).forEach(function(ele){
if(typeof obj[ele] == 'object') {
obj[ele] = Observer(obj[ele]);
}
})
};
return new Proxy(obj, {
set (target, key, val){
if (typeof val === 'object') {
val = Observer(val);
}
Reflect.set(target, key, val);
upData();
}
})
}
let data = Observer({});
data.box = {
value: 'ccc',
name:{
nameData: "ttt",
}
}
</script>
</html>
Proxy 的全部方法
const p = new Proxy({},{
// 攔截對象屬性的讀取
get(target, propKey, receiver){},
// 攔截對象屬性的寫入
set(target, propKey, receiver){},
// 攔截對象 in 操作
has(target, propKey){},
// 攔截對象 delete 操作
deleteProperty(target, propKey){}
// 攔截獲取代理對象的所有屬性鍵時觸發(fā)該操作，Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環(huán)
ownKeys(target){}
// 攔截獲取對象的某個屬性時,進行操作
getOwnPropertyDescriptorr(target, propKey)
// 攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布爾值。
defineProperty(target, propKey, propDesc)
// 攔截讓代理對象不可擴展時觸發(fā)該操作，在執(zhí)行 Object.preventExtensions(proxy) 時。
preventExtensions(target){}
// 攔截判斷代理對象是否是可擴展時觸發(fā)該操作，在執(zhí)行 Object.isExtensible(proxy)，返回一個布爾值。
isExtensible(target){}
// 攔截設(shè)置代理對象的原型時觸發(fā)該操作，在執(zhí)行 Object.setPrototypeOf(proxy, null) 時，返回一個布爾值。
setPrototypeOf(target, proto){}
// 攔截函數(shù)的代理對象時觸發(fā)該操作，在執(zhí)行 proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
apply(target, object, args){}
// 攔截 Proxy 實例作為構(gòu)造函數(shù)調(diào)用的操作，比如在執(zhí)行 new proxy(...args)。
construct(target, args){}
})
