JavaScript Object.defineProperty()

Định nghĩa và cách sử dụng

Object.defineProperty() Phương pháp được sử dụng để thêm hoặc sửa thuộc tính của đối tượng.

Object.defineProperty() Phương pháp cho phép bạn thay đổi metadata của thuộc tính.

Object.defineProperty() Phương pháp cho phép bạn thêm getter và setter.

Phương pháp liên quan:

Object.defineProperty() Thêm hoặc sửa thuộc tính.

Object.defineProperties() Thêm hoặc sửa nhiều thuộc tính.

Object.getOwnPropertyNames() Trả về tất cả các tên thuộc tính của đối tượng.

Object.getOwnPropertyDescriptor() Trả về mô tả thuộc tính của thuộc tính.

Object.getOwnPropertyDescriptors() Trả về mô tả thuộc tính của tất cả các thuộc tính đối tượng.

Mẫu

Ví dụ 1

Thêm thuộc tính:

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Thêm một thuộc tính mới
Object.defineProperty(person, "year", {value:"2008"});

Thử ngay

Ví dụ 2

Chỉnh sửa thuộc tính:

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "EN"
};
// Chỉnh sửa một thuộc tính
Object.defineProperty(person, "language", {value:"NO"});

Thử ngay

Ví dụ 3

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Chỉnh sửa một thuộc tính
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: true,
  configurable: true
});
// Lục thuộc tính
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
// Hiển thị thuộc tính
document.getElementById("demo").innerHTML = txt;

Thử ngay

Ví dụ 4

Mẫu ví dụ tiếp theo tương tự như mã ví dụ trước, nhưng ẩn thuộc tính language, làm cho nó không thể liệt kê:

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Chỉnh sửa một thuộc tính
Object.defineProperty(person, "language", {
  value: "EN"
  writable: true,
  enumerable: false,
  configurable: true
});
// Lục thuộc tính
let txt = "";
for (let x in person) {
  txt += person[x] + "<br>";
}
document.getElementById("demo").innerHTML = txt;

Thử ngay

Ví dụ 5

Ví dụ này tạo ra một setter và getter để đảm bảo rằng thuộc tính language được cập nhật thành chữ hoa:

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
  language: "NO"
};
// Chỉnh sửa một thuộc tính
Object.defineProperty(person, "language", {
  get: function() { return language },
  set: function(value) { language = value.toUpperCase() }
});
// Chỉnh sửa language
person.language = "en";
// Hiển thị language
document.getElementById("demo").innerHTML = person.language;

Thử ngay

Ví dụ 6

Ví dụ này sử dụng getter để kết hợp firstName và lastName:

// Tạo một đối tượng
const person = {
  firstName: "Bill",
  lastName: "Gates"
};
// 定义一个 Getter
Object.defineProperty(person, "fullName", {
  get: function () { return this.firstName + " " + this.lastName; }
});

Thử ngay

Ví dụ 7

JavaScript của JavaScript rất phù hợp để tạo bộ đếm:

// 定义 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; }
});

Thử ngay

Cú pháp

Object.defineProperty(object, property, descriptor)

tham số

tham số Mô tả
object Yêu cầu. Đối tượng mục tiêu.
property Yêu cầu. Tên thuộc tính.
descriptor

Yêu cầu. Đề�述 thuộc tính cần thêm hoặc sửa đổi:

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

Giá trị trả về

Loại Mô tả
Object Đối tượng sau khi thay đổi

Hỗ trợ trình duyệt

Object.defineProperty() Là tính năng của ECMAScript5 (ES5).

Từ tháng 7 năm 2013, tất cả các trình duyệt hiện đại đều hỗ trợ hoàn toàn ES5 (JavaScript 2009):

Chrome Edge Firefox Safari Opera
Chrome 23 IE/Edge 11 Firefox 21 Safari 6 Opera 15
Tháng 9 năm 2012 Tháng 9 năm 2012 Tháng 4 năm 2013 Tháng 7 năm 2012 Tháng 7 năm 2013