實現雙向繫結（ES6 寫法）
阿新 • • 發佈：2021-02-08
實現雙向繫結（ES6 寫法）
Proxy（代理） & （對映）
Proxy 是在物件之前設定一層“攔截”。外面對該物件的訪問，都要先通過這層攔截，可以對外界的訪問進行過濾和改寫操作。用在這裡表示由它來“代理”某些操作，可以譯為“代理器”。
語法和基本使用
語法
const p = new Proxy(target, handler)
// const p = new Proxy(目標物件, 處理程式)
基本使用
現只說 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, 使用 Proxy 對比 Object.defineProperty 不止可以監聽物件還可以監聽陣列的變化
let data = []
let proxyData = new Proxy( 簡單的模擬雙向繫結
在上篇我在記 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') {
// 迴圈下層判斷是不是物件
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){}
// 攔截獲取代理物件的所有屬性鍵時觸發該操作，Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in迴圈
ownKeys(target){}
// 攔截獲取物件的某個屬性時,進行操作
getOwnPropertyDescriptorr(target, propKey)
// 攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個布林值。
defineProperty(target, propKey, propDesc)
// 攔截讓代理物件不可擴充套件時觸發該操作，在執行 Object.preventExtensions(proxy) 時。
preventExtensions(target){}
// 攔截判斷代理物件是否是可擴充套件時觸發該操作，在執行 Object.isExtensible(proxy)，返回一個布林值。
isExtensible(target){}
// 攔截設定代理物件的原型時觸發該操作，在執行 Object.setPrototypeOf(proxy, null) 時，返回一個布林值。
setPrototypeOf(target, proto){}
// 攔截函式的代理物件時觸發該操作，在執行 proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
apply(target, object, args){}
// 攔截 Proxy 例項作為建構函式呼叫的操作，比如在執行 new proxy(...args)。
construct(target, args){}
})
