JavaScript 物件屬性
屬性管理方法
// 新增或更改物件屬性
Object.defineProperty(object, property, descriptor)
// 新增或更改物件屬性
Object.defineProperties(object, descriptors)
// 訪問屬性
Object.getOwnPropertyDescriptor(object, property)
// 訪問屬性
Object.getOwnPropertyDescriptors(object)
// 將所有屬性作為陣列返回
Object.getOwnPropertyNames(object)
// 訪問原型
Object.getPrototypeOf(object)
JavaScript Object.defineProperty()
Object.defineProperty() 方法可用於
- 新增物件的新屬性
- 更改屬性值
- 更改屬性元資料
- 更改物件 getter 和 setter
語法
Object.defineProperty(object, property, descriptor)
新增新屬性
此示例向物件新增一個新屬性
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// 新增屬性
Object.defineProperty(person, "year", {value:"2008"});
自己動手試一試 »
更改屬性值
此示例更改屬性值
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// 更改屬性
Object.defineProperty(person, "language", {value : "NO"});
自己動手試一試 »
屬性屬性
所有屬性都有一個名稱。此外，它們還有一個值。
值是屬性的屬性之一。
其他屬性是：enumerable（可列舉）、configurable（可配置）和 writable（可寫）。
這些屬性定義瞭如何訪問屬性（它是可讀的嗎？它是可寫的嗎？）
在 JavaScript 中，所有屬性都可以讀取，但只有值屬性可以更改（並且僅當屬性是可寫時）。
( ECMAScript 5 提供了獲取和設定所有屬性的屬性的方法)
更改元資料
可以更改以下屬性元資料
writable : true // 屬性值可以更改
enumerable : true // 屬性可以列舉
configurable : true // 屬性可以重新配置
writable : false // 屬性值不能更改
enumerable : false // 屬性不能列舉
configurable : false // 屬性不能重新配置
Getter 和 Setter 也可以更改
// 定義 getter
get: function() { return language }
// 定義 setter
set: function(value) { language = value }
此示例使 language 只讀
Object.defineProperty(person, "language", {writable:false});
此示例使 language 不可列舉
Object.defineProperty(person, "language", {enumerable:false});
JavaScript getOwnPropertyNames()
Object.getOwnPropertyNames() 方法可以
- 列出物件屬性
語法
Object.getOwnPropertyNames(object)
列出所有物件屬性
此示例獲取物件的全部屬性
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// 獲取所有屬性
Object.getOwnPropertyNames(person);
自己動手試一試 »
Object.getOwnPropertyNames() 也會列出不可列舉的屬性
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// 設定 language 屬性不可列舉
Object.defineProperty(person, "language", {enumerable:false});
// 獲取所有屬性
Object.getOwnPropertyNames(person);
自己動手試一試 »
JavaScript Object.keys()
Object.keys() 方法可以
- 列出可列舉的物件屬性
語法
Object.keys(object)
列出可列舉的物件屬性
此示例使用 Object.keys() 而不是 Object.getOwnPropertyNames()
示例
// 建立一個物件
const person = {
firstName: "John",
lastName : "Doe",
language : "EN"
};
// 更改 "language" 屬性
Object.defineProperty(person, "language", {enumerable:false});
// 獲取所有可列舉的屬性
Object.keys(person);
自己動手試一試 »
注意
getOwnPropertyNames() 方法返回所有屬性。
Object.keys() 方法返回所有可列舉的屬性。
如果您在定義物件屬性時沒有使用 enumerable:false，則兩個方法將返回相同的結果。
新增 Getter 和 Setter
Object.defineProperty() 方法還可以用於新增 Getter 和 Setter
示例
// 建立一個物件
const person = {firstName:"John", lastName:"Doe"};
// 定義一個 getter
Object.defineProperty(person, "fullName", {
get: function () {return this.firstName + " " + this.lastName;}
});
自己動手試一試 »
一個計數器示例
示例
// 定義物件
const obj = {counter:0};
// 定義 setter
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 (i) {this.counter -= i;}
});
// 操作計數器
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
自己動手試一試 »
原型屬性
JavaScript 物件繼承其原型的屬性。
delete 關鍵字不會刪除繼承的屬性，但如果您刪除了原型屬性，它將影響從原型繼承的所有物件。
