数据劫持原理
01.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
let obj = {
name: 'zs'
}
// 数据劫持的核心属性
Object.defineProperty(obj, 'name', {
configurable: true, // 表示属性可以配置
enumerable: true, // 表示这个属性可以枚举(遍历)
get() {
// 每次获取对象的这个属性的时候，就会被这个get方法给劫持到
console.log('get执行了')
},
// 每次设置这个对象的属性的时候，就会被set方法劫持到
// 设置的值也会劫持到
set(newValue) {
console.log('set方法执行了')
console.log(newValue)
}
})
</script>
</body>
</html>
双击01.html文件,在浏览器中打开;然后再控制台输出obj.name,会得到下面的结果显示:
证明: 每次获取对象这个name属性,就会触发get方法
接着再在控制台输出’obj.name = ‘ls’`,结果如如下所示:
证明: 每次设置对象这个name属性,set方法就会触发,而且newValue就是它要修改的值
如果,我们将01.html做一些完善:
然后就达到了数据劫持的效果~
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
