【JavaScript】属性描述符

1. 基础用法

var obj = {
  pic: '.',
  title: '..',
  desc: `...`,
  sellNumber: 1,
  favorRate: 2,
  price: 3,
}; 
// 得到属性描述符
let desc = Object.getOwnPropertyDescriptor(obj, 'favorRate')
console.log(desc)  // { value: 2, writable: true, enumerable: true, configurable: true }
// 设置属性描述符
Object.defineProperty(obj, 'favorRate', {
  value: 3,
  writable: true,  // 重写
  enumerable: true,  // 遍历
  configurable: true,  // 属性是否可以修改
})

var obj = {};

Object.defineProperty(obj, 'a', {
  get: function () {
    return 123;
  }, // 读取器 getter
  set: function (val) {
    throw new Error(
      `正在给a这个属性重新赋值，你所赋的值是${val}，但是，这个属性是不能赋值的`
    );
  }, // 设置器 setter
});

console.log(obj.a);
// obj.a = 'abx';
// console.log(obj.a); 

2. 应用场景

手写一个库、框架等。

var aGoods = {
  pic: '.',
  title: '..',
  desc: `...`,
  sellNumber: 1,
  favorRate: 2,
  price: 3,
};

class UIGoods {
  get totalPrice() {
    return this.choose * this.data.price;
  }

  get isChoose() {
    return this.choose > 0;
  }

  constructor(g) {
    g = { ...g };
    // 冻结对象内部的值都不能更改
    // 上面的对象赋值（克隆）使得只是克隆值被冻结（用户不可修改），原始值不被冻结
    Object.freeze(g);
    Object.defineProperty(this, 'data', {
      get: function () {
        return g;
      },
      set: function () {
        throw new Error('data 属性是只读的，不能重新赋值');
      },
      configurable: false,
    });
    var internalChooseValue = 0;
    Object.defineProperty(this, 'choose', {
      configurable: false,
      get: function () {
        return internalChooseValue;
      },
      set: function (val) {
        if (typeof val !== 'number') {
          throw new Error('choose属性必须是数字');
        }
        var temp = parseInt(val);
        if (temp !== val) {
          throw new Error('choose属性必须是整数');
        }
        if (val < 0) {
          throw new Error('choose属性必须大于等于 0');
        }
        internalChooseValue = val;
      },
    });
    this.a = 1;
    // seal 密封，后加的值可以修改
    Object.seal(this);
  }
}
// 禁止向原型添加内容（属性等）
Object.freeze(UIGoods.prototype);

var g = new UIGoods(aGoods);
UIGoods.prototype.haha = 'abc';
// 直接设置 data 的属性是使 data 不能直接赋值，但是 data 内部属性可以赋值
// g.data.price = 100;

console.log(g.haha);