JavaScript Object.defineProperty()

คำอธิบายและวิธีใช้

Object.defineProperty() วิธีที่ใช้เพื่อเพิ่มหรือแก้ไข attribute ของวัตถุ

Object.defineProperty() วิธีที่อนุญาตให้เปลี่ยน metadata ของ attribute

Object.defineProperty() วิธีที่อนุญาตให้เพิ่ม getter และ setter

วิธีเรียกใช้

Object.defineProperty() เพิ่มหรือแก้ไข attribute

Object.defineProperties() เพิ่มหรือแก้ไข attribute หลายตัว

Object.getOwnPropertyNames() กลับค่าของ attribute ทั้งหมดของวัตถุ

Object.getOwnPropertyDescriptor() กลับค่าของ attribute

Object.getOwnPropertyDescriptors() กลับค่าของ attribute ทั้งหมดของวัตถุ

ตัวอย่าง

ตัวอย่าง 1

เพิ่มค่า attribute:

// สร้างออบเจกต์
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// เพิ่มค่า attribute ใหม่
Object.defineProperty(person, "year", {value:"2008"});

亲自试一试

ตัวอย่าง 2

แก้ไขค่า attribute:

// สร้างออบเจกต์
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>";
}
// แสดงค่า attribute
document.getElementById("demo").innerHTML = txt;

亲自试一试

ตัวอย่าง 4

ตัวอย่างต่อไปนี้เหมือนตัวอย่างที่แล้ว แต่ซ่อนค่าทางนิยาย attribute ทำให้ไม่สามารถเรียกใช้ได้:

// สร้างออบเจกต์
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

Getter และ Setter ของ JavaScript มีความเหมาะสมมากสำหรับการสร้างเคาน์เตอร์:

// กำหนด 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) ทั้งหมด: