33_监听对象
本题考点:Object.defineProperty、get、set
根据题目要求,对”person“对象数据进行拦截,在拦截中操作页面的渲染,核心步骤有:
- 创建”Observe“函数,接收一个对象参数,首先判断该对象参数是否合法,之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截,但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能,之后可以复用此函数。
- 创建“defineReactive”函数,接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截,且每当触发set时,调用”render“方法重新渲染视图
参考答案:
function Observe(target) {
if (typeof target !== 'object' || target == null) {
return target
}
for (var key in target) {
defineReactive(target, key, target[key])
}
}
function defineReactive(target, key, value) {
Object.defineProperty(target, key, {
get: function () {
return value
},
set: function (newVal) {
if (newVal !== value) {
value = newVal
_render(ul)
}
}
})
}
Observe(person)