题目
请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 可以使用预设代码"_render"函数
编辑
核心代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监听对象</title> </head> <style>ul { list-style: none; } </style> <body> <ul></ul> <script>var ul = document.querySelector('ul'); var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 }; const _render = element => { var str = `<li>姓名：<span>${person.name}</span></li> <li>性别：<span>${person.sex}</span></li> <li>年龄：<span>${person.age}</span></li> <li>身高：<span>${person.height}</span></li> <li>体重：<span>${person.weight}</span></li>` element.innerHTML = str; } _render(ul); // 补全代码 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) </script> </body> </html>
总结
创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截，但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截，且每当触发set时，调用”render“方法重新渲染视图
