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"});

تجربة شخصية

مثال 2

تعديل الخاصية:

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

تجربة شخصية

مثال 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;

تجربة شخصية

مثال 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;

تجربة شخصية

مثال 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;

تجربة شخصية

مثال 6

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

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

تجربة شخصية

مثال 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; }
});

تجربة شخصية

النصب

Object.defineProperty(object, property, descriptor)

المواضيع

القيمة المعدلة

دعم المتصفحات

Object.defineProperty() هي خصائص ECMAScript5 (ES5).

من يوليو 2013، يدعم جميع المتصفحات الحديثة ES5 (JavaScript 2009) بشكل كامل: