1. 程式人生 > >JavaScript -- 理解對象的屬性

JavaScript -- 理解對象的屬性

key tab 調用 示例 defined 修改屬性 rabl 特性 添加數據

備註:本文長期修改
說明:ECMAScript中屬性有兩種:數據屬性和訪問器屬性。

屬性描述符

1. 數據屬性

說明:當修改或定義對象的某個屬性的時候,給這個屬性添加一些特性。
特性名稱 描述 默認值
value 設置屬性的值 undefined
writable 設置是否可修改值 true
enumerable 表示能否通過for-in或 obj.keys()循環返回屬性。 true
configurable
  1. 表示能否通過 delete 刪除屬性從而重新定義屬性
  2. 能否修改屬性的特性
  3. 能否把屬性修改為訪問器屬性
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.definePropertyObject.definePropertiesObject.create 函數的情況下添加數據屬性,writable、enumerable和configurable默認值為 false

使用 對象字面量 創建的屬性,writable、enumerable和configurable特性默認為true。

2. 訪問器屬性

說明:設置或獲取對象的某個屬性的值。
特性名稱 描述 默認值
Get 在讀取屬性時調用的函數 undefined
Set 在寫入屬性時調用的函數 true
enumerable 是否可以被枚舉(使用for...in或Object.keys()) true
configurable
  1. 表示能否通過 delete 刪除屬性從而重新定義屬性
  2. 能否修改屬性的特性
  3. 能否把屬性修改為訪問器屬性(目標屬性是否可以再次設置特性)
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 -- 理解對象的屬性