數據劫持原理
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"