JS对象数据属性 && Object.defineProperty函数

ECMAScript中定义两种属性：数据属性和访问器属性

数据属性

[Configurable] 是否能通过delete删除属性从而重新定义属性，能否修改属性的特性，能否把属性修改为访问器属性。默认为true

[Enumerable] 能否通过for-in循环返回该属性。默认为true

[Writable] 能否修改属性的值。默认为true

[Value] 包含这个属性的数据值，读写属性的时候操作的是该值，默认为undefined

要修改属性默认的特性需要使用ECMAScript5的Object.defineProperty()方法，该方法接受三个参数：属性所在的对象、属性的名字、一个描述符对象。其中描述符对象的属性必须是：configurable、enumerable、writable、value。这也就是类似于vue这种mvvm框架实现的核心函数。

var person = {
name: "Rack",
age: 26,
sex: "man"
};
for (var i in person) console.log(i);
Object.defineProperty(person, 'age', {
enumerable: false
});
console.log("**********enumerable**************");
for (var i in person) console.log(i);

这里修改了person对象中age属性的enumerable特性为false，所以在用for-in就枚举不到age属性

var person = {
name: "Rack",
age: 26,
sex: "man"
};
Object.defineProperty(person, 'name', {
writable: false
});
Object.defineProperty(person, 'age', {
configurable: false
})
console.log("**********writable**************");
console.log(person.name);
person.name = "Rack's father";
console.log(person.name);
console.log("**********configurable**************");
console.log(person.age);
delete person.age;
console.log(person.age);

并且修改了person对象中name属性的writable特性为false，所以person对象的name属性就修改不了，在非严格模式下person.name = “Rack’s father”;这句赋值操作将被忽略，在严格模式下，赋值操作将会导致抛出错误。

类似的configurable特性和writable相似，不能使用delete删除该属性

var person = {
name: "Rack",
age: 26
};
console.log("**********value**************");
console.log(person.sex);
Object.defineProperty(person, 'sex', {
value: "woman"
});
console.log(person.sex);

value特性默认值是undefined，这也就是能说明一个对象的属性没定义或没初始化的话，使用的时候是undefined

访问器属性

访问器属性不包含数据值，包含一对getter和setter函数，但都不是必须的。在读取访问器属性时，会调用getter函数，负责返回有效的值；在写入访问器属性时，会调用setter函数并传入新值，负责处理数据。访问器属性有4个特性。

[Configurable] 同数据属性中的Configurable

[Enumerable] 同数据属性中的Enumerable

[Get] 在读取属性时调用的函数，默认是undefined

[Set] 在写入属性时调用的函数，默认是undefined

var person = {
_name: 'Rack',
nameSetCount: 0
};
Object.defineProperty(person, 'name', {
get: function (){
return this._name;
},
set: function (newName){
this._name = newName;
this.nameSetCount++;
}
});
console.log(person._name);
person.name = "Rack's father";
person.name = "Rack's father";
console.log(person._name);
console.log(person.nameSetCount);

以上代码创建了一个person对象，并定义了两个默认属性_name和nameSetCount。nameSetCount表明_name被赋值的次数。

其中name是访问器属性，_name是数据属性！！！

Object.defineProperty使用技巧

一、扩展默认对象函数。[当要给Array或者String这种内置对象添加函数时]

Array.prototype.unique = function (){
var res = [];
var json = {};
for (var i = 0; i < this.length; i++){
if (!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
};
var tmpArray = [1,2,4,3,2,1,7];
tmpArray = tmpArray.unique();
console.log(tmpArray);
console.log("******************");
for (var i in tmpArray) {
console.log(i);
}

如上代码为Array添加了一个去重的函数。但是用for-in遍历的时候就出了问题。扩展函数unique也被枚举了出来。所以优化代码如下

Array.prototype.unique = function (){
var res = [];
var json = {};
for (var i = 0; i < this.length; i++){
if (!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
};
Object.defineProperty(Array.prototype, "unique", {
enumerable: false
});
var tmpArray = [1,2,4,3,2,1,7];
tmpArray = tmpArray.unique();
console.log(tmpArray);
console.log("******************");
for (var i in tmpArray) {
console.log(i);
}

如上代码修改了Array.prototype属性unique的enumerable特性使其不可被枚举。

二、调试最终成员变量在哪修改

经常有这样一种情况，为什么对象的属性就被莫名其妙的修改了，而且是在哪修改的，这时可以用访问器的特性setter和getter来追踪。

var person = {
name: "Rack",
age: 20
}
Object.defineProperty(person, "name", {
get: function (){
return this._name;
},
set: function (newName){
debugger;
this._name = newName;
}
});
person.name = "Rack's father";

如上代码就可以查到person的name属性到底是在那块被修改的。