JavaScript Object.defineProperty()

定义和用法

Object.defineProperty() 方法用于添加或修改对象的属性。

Object.defineProperty() 方法允许你更改属性的元数据。

Object.defineProperty() 方法允许你添加 getter 和 setter。

相关方法:

Object.defineProperty() 添加或修改属性。

Object.defineProperties() 添加或修改多个属性。

Object.getOwnPropertyNames() 返回对象的所有属性名。

Object.getOwnPropertyDescriptor() 返回属性的描述符。

Object.getOwnPropertyDescriptors() 返回对象所有属性的描述符。

实例

例子 1

添加属性:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 添加一个新属性
Object.defineProperty(person, "year", {value:"2008"});

Subukan ang iyong sarili

例子 2

修改属性:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// 修改一个属性
Object.defineProperty(person, "language", {value:"NO"});

Subukan ang iyong sarili

例子 3

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// 枚举属性
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// 显示属性
document.getElementById("demo").innerHTML = txt;

Subukan ang iyong sarili

例子 4

下一样例与上一个样例代码相同,但隐藏了 language 属性,使其不可枚举:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// 枚举属性
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Subukan ang iyong sarili

例子 5

此例创建了一个 setter 和 getter,以确保 language 属性的更新为大写:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// 修改一个属性
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// 修改 language
person.language = "en";
// 显示 language
document.getElementById("demo").innerHTML = person.language;

Subukan ang iyong sarili

例子 6

此例使用 getter 将 firstName 和 lastName 连接起来:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// 定义一个 Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Subukan ang iyong sarili

例子 7

JavaScript 的 Getter 和 Setter 非常适合创建计数器:

// 定义 Setter 和 Getter
Object.defineProperty(obj, "reset", {
  get: function () { this.counter = 0; }
});
Object.defineProperty(obj, "increment", {
  get: function () { this.counter++; }
});
Object.defineProperty(obj, "decrement", {
  get: function () { this.counter--; }
});
Object.defineProperty(obj, "add", {
  set: function (value) { this.counter += value; }
});
Object.defineProperty(obj, "subtract", {
  set: function (value) { this.counter -= value; }
});

Subukan ang iyong sarili

Mga pangunahing sintaksis

Object.defineProperty(object, property, descriptor)

Mga argumento

Mga argumento Paglalarawan
object Mga kinakailangan. Ang target na object.
property Mga kinakailangan. Ang pangalan ng katangian.
descriptor

Mga kinakailangan. Ang pagdaragdag o pagwawasto ng paglalarawan ng katangian:

  • value: value
  • writable : true|false
  • enumerable : true|false
  • configurable : true|false
  • get : function
  • set : function

Halimbawa ng pagbabalik

Uri Paglalarawan
Object Nagpalit na object.

Suporta ng browser

Object.defineProperty() Ito ay katangian ng ECMAScript5 (ES5).

Simula noong Hulyo 2013, lahat ng modernong browser ay ganap na sumusuporta sa ES5 (JavaScript 2009):

Chrome Edge Firefox Safari Opera
Chrome 23 IE/Edge 11 Firefox 21 Safari 6 Opera 15
Setyembre 2012 Setyembre 2012 Abril 2013 Hulyo 2012 Hulyo 2013