数据劫持原理

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"