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

最新推荐文章于 2024-09-29 09:37:30 发布

原创最新推荐文章于 2024-09-29 09:37:30 发布 · 4.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Object.defineProperty--数据劫持原理 #Object.defineProperty #数据劫持

前端专栏收录该内容

61 篇文章

订阅专栏

本文深入解析数据劫持的核心原理，通过实例演示如何使用Object.defineProperty方法实现数据的动态监听，包括属性的读取和修改，展示了数据劫持在前端开发中的应用。

数据劫持原理

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>