描述
请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 可以使用预设代码"_render"函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
ul {
list-style: none;
}
</style>
<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);
// 创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。
//可以通过创建”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函数对该对象的属性值进行拦截
Object.defineProperty(target, key, {
get: function () {
return value
},
set: function (newVal) {
//判断改变的value值是否和原值一样，不一样则重新赋值
if (newVal !== value) {
value = newVal
_render(ul) //重新渲染
}
}
})
}
Observe(person) //将以上person的实例传入函数
</script>
</body>
</html>
