Object.defineProperty()

192 阅读2分钟
Object.defineProperty()直接在对象上定义新属性,或修改对象上的现有属性,并返回该对象。
  1. 语法 Object.defineProperty(obj,prop,descriptor)
  2. 参数
  • obj 需要定义属性的对象
  • prop 要定义或修改的属性的名称
  • descriptor 将被定义或修改属性的描述符
  1. 返回值:返回传入函数的对象,即第一个参数obj

  2. 对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。

  • 数据描述符和存取描述符均具有以下可选键值:

    configurable:当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,也能够被删除。默认为 false。(为false时不能设置value,writable,configurable)

    enumerable:当且仅当该属性的 enumerable 为 true 时,该属性才能够出现在对象的枚举属性中。默认为 false。(是否能在for...in循环中遍历出来或在Object.keys中列举出来)

  • 数据描述符是一个拥有可写或不可写值的属性。

    writable:当且仅当该属性的 writable 为 true 时,该属性才能被赋值运算符改变。默认为 false。

    value:该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

  • 存取描述符是由一对 getter-setter

    set:一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

    get:一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

注意:在 descriptor 中不能同时设置访问器(get 和 set)和 wriable 或 value,否则会错,就是说想用 get 和 set,就不能用 writable 或 value 中的任何一个。

set和get

    var person = {};
    var name = '';// 初始化一个空值
    Object.defineProperty(person, 'personName', {
        set: function (value) {
          console.log(value);// JavaScript高级程序设计
          name = value;
        },
        get: function () {
          return '《' + name + '》';// personName的值为return的值
        }
    });
    
    //person.personName的赋值和取值会触发set 和 get函数
    // 赋值时调用set方法
    person.personName = 'JavaScript高级程序设计';
    // 取值时调用get方法
    console.log(person.personName);// 《JavaScript高级程序设计》,若没有给person.personName赋值,则打印结果为《》