思路:遍历对象obj的每一个键,然后对该键设置Object.defineProperty方法进行监听,其中处理对象中,get方法直接返回键所对应的值,set方法直接将键设置为新值,并且触发_render函数进行渲染。
<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(obj)
{
for(let key in obj)
{
let value=obj[key]
Object.defineProperty(obj,key,{
get()
{
return value
},
set(newValue)
{
value=newValue
_render(ul)
}
})
}
}
observe(person)
</script>
总结:Object.defineProperty是js内置的定义对象属性的方法,用来监听对象属性。Object.defineProperty(对象,要定义或者修改的属性名,描述对象),其中描述对象一般包含get函数获取属性值、set函数设置属性值。



京公网安备 11010502036488号