defineProperty给对象追加属性

最新推荐文章于 2024-02-28 11:12:03 发布

原创最新推荐文章于 2024-02-28 11:12:03 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #vue.js

VUE 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了两种使用JavaScript的Object.defineProperty()方法为对象添加动态属性的方式。第一种方式直接定义了属性的值、可枚举性、可写性和可配置性；第二种方式通过getter和setter函数控制属性的读取和修改。这两种方法提供了对对象属性更细粒度的控制。

方法一

<script>
    let number = 20;
    let man = {
      name: "张三",
      sex: "男",
    };
    Object.defineProperty(man, "age", {
      value: number,
      enumerable: true, //控制添加的内容是否参与遍历
      writable: true, //控制添加的内容是否可以修改
      configurable: true, //控制添加的内容是否可以删除
    });
    console.log(man);
  </script>

方法二

<script>
    let number = 20;
    let man = {
      name: "张三",
      sex: "男",
    };
    Object.defineProperty(man, "age", {
      get() {
        //当读取man对象的age属性时调用此函数
        return number;
      },
      set(value) {
        //当修改man对象的age属性时调用此函数
        number = value;
      },
    });
    console.log(man);
  </script>