数据劫持原理
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
let obj = {
name: 'zs'
}
// 数据劫持的核心属性
Object.defineProperty(obj, 'name', {
enumerable: true,
configurable: true,
get() {
// 每次获取对象的这个属性的时候，就会被这个get方法给劫持到
console.log('get执行了')
},
// 每次设置这个对象的属性的时候，就会被set方法劫持到
// 设置的值也会劫持到
set(newValue) {
console.log('set方法执行了');
console.log(newValue)
}
})
</script>
</html>
在浏览器中打开;然后再控制台输出obj.name,会得到下面的结果显示:
obj.name
1.html:23 get执行了
undefined
接着再在控制台输出’obj.name = ‘ls’`,结果如如下所示:
obj.name="ls"
1.html:28 set方法执行了
1.html:29 ls
"ls"