Object.defineProperty()--数据劫持原理

数据劫持原理

01.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’`,结果如如下所示:
Object.defineProperty()--数据劫持原理_第1张图片

证明: 每次设置对象这个name属性,set方法就会触发,而且newValue就是它要修改的值

如果,我们将01.html做一些完善:
Object.defineProperty()--数据劫持原理_第2张图片
然后就达到了数据劫持的效果~

你可能感兴趣的:(前端)