本篇主要介紹JS中對象的屬性以现，包括：屬性的分類铃将、訪問方式、檢測屬性蜻直、遍歷屬性以及屬性特性等內(nèi)容。
屬性:對象的成員,不單單是'屬性'(字段),屬性也包含了方法
屬性的命名方式
屬性名稱可以包含英文字符、數(shù)字(不能開頭)概而、特殊符號(如：-呼巷、_、$等等)赎瑰。
但一般使用純英文字符王悍，在特殊情況下會添加-(橫杠：-webkit-、-moz- )以及 _(下劃線)餐曼。
若屬性名稱包含了-(橫杠)压储，屬性訪問方式只能采用'[ ]'中括號訪問：
var o = {
x: 1,
y: 2,
'-x': 3,
'-showX': function () {
alert(this.x);
}
}
// o.-x; // 此訪問方式會報異常
console.log(o['-x']); // => 3 ：讀取帶-(橫杠)名稱的屬性，只能采用'[ ]'中括號訪問方式
o['-showX'](); // => 彈出1 ：若方法名稱帶-(橫杠)源譬，執(zhí)行方式很別扭
屬性的查找路徑
假設(shè)讀取某個對象的屬性x集惋，首先會在此對象的實例屬性中查找。若沒有找到瓶佳，將會在此對象的原型對象中查找屬性x芋膘。若原型對象也沒有屬性x，將繼續(xù)查找這個原型對象的原型(假設(shè)原型對象含有原型)霸饲，一直到找到屬性x或者無原型為止为朋。
屬性的分類
對象中的的屬性根據(jù)是否是自身的分為自身屬性和繼承屬性
① 自有屬性：也可叫實例屬性；指對象自身的屬性厚脉。
② 繼承屬性：也可叫原型屬性习寸；指對象從原型中繼承的屬性。
刪除屬性
delete obj.prototypeName或者是delete obj[prototypeName]
只能刪除對象的自身屬性,不能刪除繼承(原型)屬性
var o = {};
o.x = '1';
console.log(o.x); // => 1
delete o.x;
console.log(o.x); // => undefined ：訪問不存在的屬性傻工，返回undefined
o.constructor.prototype.y = '2'; // 在原型對象上添加一個y屬性
console.log(o.y); // => 2
delete o.y; // 刪除繼承屬性y
console.log(o.y); // => 2 ：還是可以訪問繼承屬性y
檢測屬性
檢測對象中是否包含某個屬性
in操作符
說明：判斷對象是否包含某個屬性霞溪，會從對象的實例屬性、繼承屬性里進行檢測中捆。
語法：propertyName in obj
返回值：
{bool} 判斷對象的實例屬性或繼承是否包含此屬性鸯匹。
true：對象的實例屬性或繼承屬性包含此屬性；
false：對象的實例屬性或繼承屬性不包含此屬性泄伪。
function People(name) {
this.name = name;
}
function Student(age) {
this.age = age;
}
Student.prototype = new People(); // 設(shè)置Student的原型為People對象
var s = new Student(22);
console.log('age' in s); // => true ：age為實例屬性
console.log('name' in s); // => true ：name為繼承屬性
console.log('address' in s); // => false ：address不存在此對象呢殴蓬，返回false
obj.hasOwnProperty(propertyName)
說明：判斷對象是否擁有一個指定名稱的實例屬性，不會檢查繼承屬性蟋滴。
參數(shù)：
①propertyName {string} ：屬性名稱染厅。
語法：obj.hasOwnProperty(propertyName)
返回值：
{bool} 判斷對象是否擁有一個指定名稱的實例屬性；此方法不會檢查對象原型鏈中的屬性津函。
true ：屬性為對象的實例屬性肖粮，非繼承。
false ：屬性不為對象的實例屬性尔苦。
var Student = function (name) {
this.name = name;
};
// 給Student的原型添加一個sayHello方法
Student.prototype.sayHello = function () {
alert('Hello,' + this.name);
}
// 給Student的原型添加一個age屬性
Student.prototype.age = '';
var st = new Student('張三'); // 初始化對象st
console.log(st.hasOwnProperty('name')); // => true ：調(diào)用構(gòu)造函數(shù)時涩馆，通過this.name附加到實例對象上
console.log(st.hasOwnProperty('sayHello')); // => false ：sayHello方法為原型上的成員
console.log(st.hasOwnProperty('age')); // => false ：age屬性為原型上的成員
obj.propertyIsEnumerable(propertyName)
說明：判斷指定名稱的屬性是否為實例屬性并且是可枚舉的(可用for/in循環(huán)枚舉)
參數(shù)：
①propertyName {string} ：屬性名稱行施。
語法：obj.propertyIsEnumerable(propertyName)
返回值：
{bool} 判斷屬性是否為實例屬性并且是可枚舉的(可用for/in循環(huán)枚舉)，不考慮原型鏈中的成員凌净。
true ：屬性為對象的實例屬性并且是可枚舉的悲龟。
false ：屬性不為對象的實例屬性或不可枚舉的。
var o = Object.create({}, {
name: {
value: 'tom',
enumerable: true // 可枚舉
},
age: {
value: 22,
enumerable: false // 不可枚舉
}
});
console.log(o.propertyIsEnumerable('name')); // => true ：name為實例屬性并且可枚舉
console.log(o.propertyIsEnumerable('age')); // => false ：age為實例屬性但不可枚舉
console.log(o.hasOwnProperty('age')); // => true ：hasOwnProperty()方法只判斷屬性是否為實例屬性
| 檢測方法 | 語法 | 檢測屬性范圍 | 返回值 |
|---|---|---|---|
| in操作符 | propertyName in obj | 實例屬性,繼承屬性 | {bool} true 符合條件,false 不符合條件(下同) |
| obj.hasOwnPropertyy(propertyName) | obj.hasOwnProperty(propertyName) | 實例屬性 | |
| obj.perpertyIdEnumerable(propertyName) | obj.propertyIsEnumerable(propertyName) | 可枚舉的實例屬性 |
遍歷屬性
for In語句塊
說明:遍歷對象的可枚舉屬的實例屬性和繼承屬性
語法：
for (p in obj) {
// p表示遍歷的屬性名稱
}
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; // 設(shè)置o的原型為po
for (property in o) {
console.log(property); // => 輸出屬性的名稱：x冰寻、y须教、px、py
console.log(o[property]); // => 采用中括號訪問方式斩芭，輸出屬性的值
}
Object.key(obj)
說明：返回一個數(shù)組轻腺，包含對象可枚舉的實例屬性名稱
參數(shù)：
①obj {object} ：實例對象
返回值：
{Array} 返回一個數(shù)組，包含對象可枚舉的實例屬性名稱
示例：
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; // 設(shè)置o的原型為po
var propertyArray = Object.keys(o); // => 返回一個包含了可枚舉的實例屬性名稱的數(shù)組
for (var i = 0, len = propertyArray.length; i < len; i++) {
console.log(propertyArray[i]); // => 輸出實例屬性名稱：x划乖、y
}
獲取的屬性只是可枚舉的實例屬性的集合
Object.getOwnPropertyNames(obj)
說明：返回一個數(shù)組贬养，包含對象的所有實例屬性名稱。包括可枚舉和不可枚舉的
參數(shù)：
①obj {object} ：實例對象
返回值：
{Array} 返回一個數(shù)組琴庵，包含對象所有實例屬性名稱
與Object.keys()的差別：Object.keys()只返回可枚舉的實例屬性误算，Object.getOwnPropertyNames()返回所有實例屬性
示例：
var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
// 設(shè)置對象o的屬性特性：屬性x為可枚舉，屬性y為不可枚舉
Object.defineProperties(o, {
x: {
enumerable: true
},
y: {
enumerable: false
}
});
o.__proto__ = po; // 設(shè)置o的原型為po
// 1.Object.keys()：獲取一個可枚舉的實例屬性名稱的數(shù)組
var propertyArray = Object.keys(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
console.log(propertyArray[i]); // => 輸出實例屬性名稱：x
}
// 2.Object.getOwnPropertyNames()：獲取一個包含的實例屬性名稱的數(shù)組迷殿，不管實例屬性是否可枚舉
propertyArray = Object.getOwnPropertyNames(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
console.log(propertyArray[i]); // => 輸出實例屬性名稱：x儿礼、y
}
| 檢測方式 | 語法 | 遍歷屬性的范圍 | 返回值 |
|---|---|---|---|
| for in語句塊 | for (p in obj) { // p表示遍歷的屬性名稱} | 可枚舉的實例屬性和繼承屬性 | {String} 屬性的名稱 |
| Object.keys(obj) | Object.keys(obj) | 可枚舉的實例屬性 | {Array} 返回一個數(shù)組，包含對象可枚舉的實例屬性名稱 |
| Object.getOwnPropertyNames(obj) | Object.getOwnPropertyNames(obj) | 包含對象的所有實例屬性名稱庆寺。包括可枚舉和不可枚舉的 | {Array} 返回一個數(shù)組蚊夫，包含對象所有實例屬性名稱 |
屬性描述符
數(shù)據(jù)屬性
1)在使用Object.defineProperty、Object.defineProperties 或 Object.create 函數(shù)的情況下添加數(shù)據(jù)屬性懦尝，writable知纷、enumerable和configurable默認值為false。
2)使用對象直接量創(chuàng)建的屬性陵霉，writable琅轧、enumerable和configurable特性默認為true。
// 1)對象直接量踊挠；屬性特性默認為true
var o1 = {
name: 'tom'
};
console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}
// 2)通過Object.create創(chuàng)建鹰晨，屬性特性默認為false
var o2 = Object.create(null, {
name: {value:'tom'}
});
console.log(Object.getOwnPropertyDescriptor(o2, 'name')); // => Object {value: "tom", writable: false, enumerable: false, configurable: false}
訪問器屬性
說明：設(shè)置屬性的訪問方式；set止毕、get特性等
var obj = {};
// 添加一個屬性，并設(shè)置為訪問器屬性
Object.defineProperty(obj, "name", {
get: function () {
return this._name; // get和set里的變量不要使用屬性漠趁，如：屬性為name扁凛，get和set用的是_name
},
set: function (x) {
if (isNaN(x)) {
this._name = x;
} else {
this._name = 'name不能為純數(shù)字';
}
},
enumerable: true,
configurable: true
});
console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function, enumerable: true, configurable: true}
obj.name = '12';
console.log(obj.name); // => name不能為純數(shù)字
