题目来源：
双向绑定_牛客题霸_牛客网 (nowcoder.com)
JS37 双向绑定
描述
请补全JavaScript代码，要求如下：
1. 监听对象属性的变化
2. 当"person"对象属性发生变化时，页面中与该属性相关的数据同步更新
3. 将输入框中的值与"person"的"weight"属性绑定且当输入框的值发生变化时，页面中与该属性相关的数据同步更新
注意：
1. 必须使用Object.defineProperty实现且触发set方法时更新视图
2. 必须使用DOM0级标准事件（oninput）
3. 可以使用预设代码"_render"函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <style> ul { list-style: none; } </style> <input type="text"> <ul></ul> <script> var ul = document.querySelector('ul'); var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 }; var inp = document.querySelector('input'); inp.value = person.weight; const _render = () => { 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>` ul.innerHTML = str; inp.value = person.weight; } _render(ul); // 补全代码 </script> </body> </html>
预览：
1.首先我们需要先监听input输入框，当输入框内容发生变化时，触发回调函数更新person.weight值
inp.oninput=function(){
person.weight=this.value
}这段代码给输入框（
<input>）添加了一个oninput事件监听器。当输入框的值发生变化时，即用户输入内容时，会触发该事件，并执行相应的回调函数。在这个回调函数中，将输入框的值赋给person.weight属性，实现了实时更新person对象的体重属性。
但仅仅这样子，并不能事实更新页面种体重的显示值，因为没有重新渲染的操作。
2.我们需要为person的属性设置getter和setter方法。
Object.keys(person).forEach((key)=>{
var value = person[key];
Object.defineProperty(person,key,{
get(){
return value;
},
set(newValue){
value=newValue;
_render();//重新执行渲染函数
}
})
})这段代码使用
Object.defineProperty方法为person对象的每个属性定义了一个getter和setter。在getter中，返回属性对应的值；在setter中，将新的值赋给属性，并调用_render()函数重新渲染页面。通过这种方式，当person对象的属性发生改变时，会自动更新页面上显示的相关内容。
总结
首先要监听输入框的变化，并将输入框的值实时更新到person对象的体重属性中。同时，通过使用Object.defineProperty方法定义getter和setter，实现了当person对象的属性发生改变时，自动重新渲染页面。
