JavaScript -- 理解對象的屬性
阿新 • • 發佈:2018-06-06
key tab 調用 示例 defined 修改屬性 rabl 特性 添加數據
備註:本文長期修改
說明:ECMAScript中屬性有兩種:數據屬性和訪問器屬性。
屬性描述符
1. 數據屬性
說明:當修改或定義對象的某個屬性的時候,給這個屬性添加一些特性。
特性名稱 | 描述 | 默認值 |
---|---|---|
value | 設置屬性的值 | undefined |
writable | 設置是否可修改值 | true |
enumerable | 表示能否通過for-in或 obj.keys()循環返回屬性。 | true |
configurable |
|
true |
var obj = {
test:"hello"
}
//對象已有的屬性添加特性描述
Object.defineProperty(obj,"test",{
configurable:true | false,
enumerable:true | false,
value:任意類型的值,
writable:true | false
});
//對象新添加的屬性的特性描述
Object.defineProperty(obj,"newKey",{
configurable:true | false,
enumerable:true | false,
value :任意類型的值,
writable:true | false
});
在使用 Object.defineProperty
、Object.defineProperties
或 Object.create
函數的情況下添加數據屬性,writable、enumerable和configurable默認值為 false
。
使用 對象字面量 創建的屬性,writable、enumerable和configurable特性默認為true。
2. 訪問器屬性
說明:設置或獲取對象的某個屬性的值。
特性名稱 | 描述 | 默認值 |
---|---|---|
Get | 在讀取屬性時調用的函數 | undefined |
Set | 在寫入屬性時調用的函數 | true |
enumerable | 是否可以被枚舉(使用for...in或Object.keys()) | true |
configurable |
|
true |
var obj = {};
Object.defineProperty(obj, "newKey", {
get:function (){} | undefined,
set:function (value){} | undefined
configurable: true | false
enumerable: true | false
});
註意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性
ECMAScript 5中操作屬性特性的方法:
1. Object.defineProperty()
說明:此方法只能定義一個屬性
語法:
Object.defineProperty(obj, prop, descriptor)
參數列表:
obj:必需。目標對象
prop:必需。需定義或修改的屬性的名字
descriptor:必需。目標屬性所擁有的特性
返回值:
傳入函數的對象。即第一個參數obj
示例
var obj = {};
// Object.defineProperty(對象,屬性,屬性描述符)
Object.defineProperty(obj, "name", {
get: function(){
return this._name; //在 get 和 set 中使用訪問屬性必須加 "_"
},
set: function(val){
if(Array.isArray(val)){
this._name = val;
} else{
this._name = "不是數組不能賦值";
}
},
enumerable: true, // 表示可枚舉的
configurable: true // 是否可刪除屬性
});
// Object {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj, 'name'));
obj.name = "111";
console.log(obj.name);
2. Object.defineProperties()
說明:此方法用來定義多個屬性。
var obj = {};
Object.defineProperties(obj, {
name: {
value: "周華健",
writable: true
},
age: {
value: 30,
writable: true
},
sex: {
get: function(){
return this._sex;
},
set: function(val){
if(val === 1){
this._sex = "男";
}else{
this._sex = "女";
}
}
}
});
obj.sex = 0;
console.log(obj.sex); //女
JavaScript -- 理解對象的屬性