JavaScript Object.defineProperty()

Definición y uso

Object.defineProperty() El método se utiliza para agregar o modificar propiedades del objeto.

Object.defineProperty() El método permite cambiar los metadatos de las propiedades.

Object.defineProperty() El método permite agregar getter y setter.

Métodos relacionados:

Object.defineProperty() Añadir o modificar propiedades.

Object.defineProperties() Añadir o modificar múltiples propiedades.

Object.getOwnPropertyNames() Devuelve todos los nombres de propiedades del objeto.

Object.getOwnPropertyDescriptor() Devuelve la descripción de la propiedad.

Object.getOwnPropertyDescriptors() Devuelve la descripción de todas las propiedades del objeto.

Instancia

Ejemplo 1

Añadir propiedad:

// 创建一个对象
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Añadir una nueva propiedad
Object.defineProperty(person, "year", {value:"2008"});

Prueba personalmente

Ejemplo 2

Modificar propiedad:

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

Prueba personalmente

Ejemplo 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>";
}
// Mostrar propiedad
document.getElementById("demo").innerHTML = txt;

Prueba personalmente

Ejemplo 4

El siguiente ejemplo es idéntico al anterior, pero oculta la propiedad 'language' para que no sea enumerable:

// 创建一个对象
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;

Prueba personalmente

例子 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;

Prueba personalmente

例子 6

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

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

Prueba personalmente

例子 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; }
});

Prueba personalmente

Sintaxis

Object.defineProperty(object, property, descriptor)

parámetros

Valor devuelto

Compatibilidad con navegadores

Object.defineProperty() Es una característica de ECMAScript5 (ES5).

Desde julio de 2013, todos los navegadores modernos admiten completamente ES5 (JavaScript 2009):