山东农业大学学风建设专题网站seo关键词排名优化哪好
题目来源：
双向绑定_牛客题霸_牛客网 (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对象的属性发生改变时，自动重新渲染页面。