📜  JavaScript | Object.defineProperty() 方法(1)

📅  最后修改于: 2023-12-03 15:01:39.363000             🧑  作者: Mango

JavaScript | Object.defineProperty() 方法

在JavaScript中,Object.defineProperty() 方法用于在一个对象上定义一个新属性或修改对象的现有属性并返回对象。使用该方法,可以定义一个属性值、可枚举性、可配置行、可写行、获取器和设置器等。

语法
Object.defineProperty(obj, prop, descriptor)
  • obj - 必需。需要定义属性的对象。
  • prop - 必需。要定义或修改的属性的名称或 Symbol。
  • descriptor - 必需。将被定义或修改的属性的描述符对象。
描述符结构

对于属性描述符来说,有两种类型:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可以是可写的,也可以是不可写的。存取描述符是由getter-setter函数对描述的属性。

描述符结构包括以下可选键值:

  • value - 该属性的属性值。默认值为 undefined。
  • writable - 当前属性值是否可被重写。默认值为 false。
  • enumerable - 当前属性是否可被枚举。默认值为 false。
  • configurable - 当前属性是否可被删除或值能否改变。默认值为 false。
  • get - 一个函数,使用该函数获取属性值。默认值是 undefined。
  • set - 一个函数,使用该函数设置属性值。默认值是 undefined。
示例
  1. 定义一个只读属性

下面的示例使用Object.defineProperty()方法将只读属性color定义为对象car的属性。

var car = {};
Object.defineProperty(car, 'color', {
  value: 'Red',
  writable: false
});
car.color = 'Blue'; // 报错,无法修改只读属性
console.log(car.color); // 输出:Red
  1. 定义一个具有getter的属性

下面的示例使用Object.defineProperty()方法将具有getter的属性color定义为对象car的属性。

var car = {
  color: 'Red'
};
Object.defineProperty(car, 'style', {
  get: function() { return 'Sport'; }
});
console.log(car.style); // 输出:Sport
  1. 定义一个具有setter和getter的属性

下面的示例使用Object.defineProperty()方法将具有getter和setter的属性color定义为对象car的属性。

var car = {
  _color: 'Red'
};
Object.defineProperty(car, 'color', {
  get: function() {
    console.log('You are reading color');
    return this._color;
  },
  set: function(newColor) {
    console.log('You are setting color');
    this._color = newColor;
  }
});
console.log(car.color); // 输出:You are reading color, Red
car.color = 'Blue'; // 输出:You are setting color
console.log(car.color); // 输出:You are reading color, Blue
总结

Object.defineProperty()方法使你可以定义对象上的新属性或修改现有属性。使用它,可以满足各种需求,如定义只读属性、具有getter和setter的属性等。要使用它,必须提供属性所依赖的对象、属性名称和描述符对象,描述符对象包含属性值、可写性、可枚举性、可配置性、getter和setter等方法。