Proxy和Object.defineProperty一样，用来实现数据劫持的，是数据【响应式】的基本前提
1、Object.defineProperty
- html
<div id="box"></div>
- js
const obj = {}
Object.defineProperty(obj, 'text', {
get() {
return box.innerHtml || ''
},
set(v) {
box.innerHtml = v
}
})
obj.text = 22
console.log(obj.text)
2、proxy
给对象设置一个代理，操作对象，会被拦截，作为代理器
// 数组，对象、Set、Map都可以
const s = []
const proxyS = new Proxy(s, {
// 使用Reflect.set、get 会走target的默认行为
get(target) {
const value = Reflect.get(...arguments)
// 调用的proxy对象本身不具有这类方法
// 如 set、has；选择在这里改变指向，是为了统一处理，如果在调用的地方处理则需要调用一次指向一次
if (value instanceof Function) return value.bind(target)
return Reflect.get(...arguments)
},
set() {
Reflect.set(...arguments)
}
})
proxyS.push(1)
console.log(proxyS.length);
console.log(proxyS);
console.log(s);
