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 年 7 月起，所有現代瀏覽器均完全支持 ES5（JavaScript 2009）：