Proxy + Reflect
HTML代码
<input type="text" id="input" />
<span id="text"></span>
Javascript代码
const input = document.getElementById('input');
const text = document.getElementById('text');
let obj = {};
let proxy = new Proxy(obj, {
get: (target, key ,receiver) => {
return Reflect.get(target, key ,receiver);
},
set: (target, key, val, receiver) => {
if(key == "text"){
text.innerHTML = val;
}
return Reflect.set(target, key ,val, receiver);
}
})
input.addEventListener('keyup', e => {
proxy.text = e.target.value;
})
Object.defineProperty()
Javascript代码
const input = document.getElementById('input');
const text = document.getElementById('text');
let obj = {text: ''};
input.addEventListener('keyup', e => {
obj.text = e.target.value;
})
Object.defineProperty(obj, 'text', {
enumerable: true,
configurable: true,
get: function(){
return this._name;
},
set: function(val){
this._name = val;
text.innerHTML = val;
}
})
两者差异
1.Object.defineProperty()本身有一定的监控到数组下标变化的能力,但无法检测到新增或者删除,导致数组新增删除的元素不能实时响应。proxy可以实时响应到数组的所有变动。
例:使用defineProperty监听数组变化,将数组的索引当作属性,当添加一个元素的时候,并不会监听到新添加的
var arr = [1,2,3,4]
arr.forEach((item,index)=>{
Object.defineProperty(arr,index,{
set:function(val){
item = val
},
get:function(val){
return item
}
})
})
2.Object.defineProperty()劫持的是对象的属性,所以需要对每个对象的所有属性进行遍历劫持。proxy是劫持整个对象,并且返回一个新对象