1. 程式人生 > >JS面向物件之物件的屬性

JS面向物件之物件的屬性

1.屬性的設定和獲取

通過 . 操作符或者[ ]
區別:. 操作符取自身的屬性,[ ]可以是變數

var o = {};
o.name = "緣滅";
var aaa = "name";
console.log(o[aaa]);//緣滅

ps:一道比較坑的筆試題

var str = "abc";
str += 1;
var test = typeof(str);
if(test.length == 6){
    test.sign = "hahaha"//test不是物件,賦值是沒有效果的
}
console.log(test.sign);//undefined

2.屬性的刪除

delete命令用於刪除物件的屬性,刪除成功後返回true。刪不掉原型上的
注意:刪除一個不存在的屬性,delete不報錯,而且返回true。因此,不能根據delete命令的結果,認定某個屬性是存在的。

var obj = { p: 1 };
delete obj.p // true
obj.p // undefined

3.屬性的檢測

in 或者 hasOwnProperty()方法

var o = {};
o.name = "緣滅";
console.log("name" in o);//true
console.log(o.hasOwnProperty
("name"));//true

4.屬性的列舉

for…in迴圈用來遍歷一個物件的全部屬性。包括原型上的屬性,而且順序是不確定的

var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
  console.log('鍵名:', i);//a b c
  console.log('鍵值:', obj[i]);//1 2 3
}

檢視一個物件本身的所有屬性,也可以使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};
Object.keys(obj);// ['key1', 'key2']
}

5.ES中有兩種屬性:資料屬性和訪問器屬性

資料屬性:
[[Configurable]]:表示能否通過delete刪除屬性,預設true
[[Enumerable]]:表示能否通過for-in迴圈返回屬性,預設true
[[Writable]]:表示能否修改屬性的值,預設true
[[Value]]:包含這個屬性的資料值,預設undefined

修改預設屬性特性:Object.defineProperty(屬性所在的物件,屬性名,描述符物件)
var person = {};
Object.defineProperty(person, "name", {
    writable: false,     //只讀,不允許修改
    value: "Nicholas"
});
alert(person.name);//Nicholas
person.name = "Michael”;  //修改不成功,嚴格模式下會報錯
alert(person.name);//Nicholas

注意:一旦把屬性定義為不可配置,就不能再把他變回可配置了。此時再呼叫除writable之外的特性都會報錯。

訪問器屬性:
[[Configurable]]:表示能否通過delete刪除屬性,預設true
[[Enumerable]]:表示能否通過for-in迴圈返回屬性,預設true
[[Get]]:讀取屬性時呼叫的函式,預設undefined
[[Set]]:寫入屬性時呼叫的函式,預設undefined

必須使用 Object.defineProperty(屬性所在的物件,屬性名,描述符物件) 定義訪問器屬性
var book = {
    _year: 2004,    //_表示只能通過物件方法訪問的屬性
    edition: 1
};
Object.defineProperty(book, "year", {
    get: function(){
        return this._year;
    },
    set: function(newValue){
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year = 2006;
alert(book.edition); //3