JavaScript 数据属性和访问器属性

　　在JavaScript中对象被定义为"无序属性的集合，其属性能够包含基本值、对象或函数。"通俗点讲，咱们能够把对象理解为一组一组的名值对，其中值能够是数据或函数。

　　建立自定义对象一般有两种方法，第一种就是建立一个Object的实例，而后再为其添加属性和方法，例如：

var person = new Object();
person.name = "Scott";
person.age = 24;
person.sayName = function(){
    alert(person.name);
}

　　第二种方法即对象字面量法，通常推荐使用这种方法建立对象，例如:

var person = {
    name: "Scott",
    age: 24,
    sayName: function(){
         alert(this.name);  
    }
}

　　属性类型

　　JavaScript中定义了两种不一样的属性：数据属性和访问器属性。数据属性通常用于存储数据数值，而访问器属性通常进行get/set操做，不能直接存储数据数值。在ES5中，咱们为了描述属性(property)的各类特征，定义了特性(attribute)。在JavaScript中不能直接访问特性，咱们把它放在两对方括号中，例如[[Enumerable]]。

• 数据属性

　　数据属性主要有四个特性描述其行为：

1. [[Configurable]]：默认为true。表示可否经过delete删除属性从而从新定义属性，可否修改属性特性，或者可否把属性修改成访问器属性；
2. [[Enumerable]]：默认为true。表示可否经过for-in循环返回属性；
3. [[Writable]]：默认为true。表示可否修改属性的值。
4. [[Value]]：默认值为undefined。表示包含属性的数据值。读写属性值都从这个位置进行。

　　对于上面直接在person对象上定义的属性，它们的[[Configurable]]、[[Enumerable]]、[[Writable]]特性都被默认设置为true，而[[Value]]特性被设置为特定值。若是想要修改属性默认的特性，可使用ES5提供的Object.defineProperty()方法，这个方法接收三个参数：属性所在对象、属性的名字和一个描述符对象。描述符对象只能包含上述四个特性的一个或多个。例子以下：

var person = {
    name: "Scott"
}
Object.defineProperty(person,"name",{
    writable:false;
})

console.log(person.name);   //"Scott"
person.name = "Evan";
console.log(person.name);   //"Scott"

　　将person对象name属性的特性writable设置为false，此属性的值为不可修改的，所以对该属性的复制操做会直接忽略。

var person = {
    name: "Scott"
}
Object.defineProperty(person,"name",{
    configurable:false;
})

console.log(person.name);   //"Scott"
delete person.name;
console.log(person.name);   //"Scott"

　　能够看到，当把name属性的特性值configurable设置为false以后，就表示不能从对象中删除属性。但须要注意的是，当把属性定义为不可配置以后，就不能把它变回可配置的了。此时修改除writable以外的其它特性都会报错，例如：

var person = {
    name: "Scott"
}
Object.defineProperty(person,"name",{
    configurable:false;
})

Object.defineProperty(person,"name",{
    configurable:true;    //此处会抛出错误
})

　　也就是说，在把configurable特性修改成false以后，再修改其它特性就会有限制存在。

• 访问器属性

　　访问器属性不包含数据值。它包含一对getter和setter函数。当读取访问器属性时，会调用getter函数并返回有效值；当写入访问器属性时，会调用setter函数并传入新值，setter函数负责处理数据。该属性有四个特性：

1. [[Configurable]]：默认为true。表示可否经过delete删除属性从而从新定义属性，可否修改属性特性，或者可否把属性修改成访问器属性；
2. [[Enumerable]]：默认为true。表示可否经过for-in循环返回属性；
3. [[Get]]：读取属性时调用的函数，默认为undefined；
4. [[Set]]：写入属性时调用的函数，默认为undefined。

　　访问器属性不能直接定义，必须经过Object.defineProperty()函数定义，例如：

var person = {
    _name: "Scott",
    _age: 24,
    _tel: 86247
};
//name属性为只读的
Object.defineProperty(person,"name",{
    get: function(){
        return this._name; 
    }
});
//age属性为只写不可读的
Object.defineProperty(person,"age",{
    set: function(p){
         this._age = p;
    }
});
//tel属性为可读可写的
Object.defineProperty(person,"tel",{
    get:function(){
         return this._tel;
    },
    set: function(p){
         this._tel = p;
    }
});
console.log(person.name);   //"Scott"
person.name = "Evan";
console.log(person.name);   //"Scott"，对name属性的修改无效
console.log(person.age);    //undefined，不可读属性
person.age = 25;
console.log(person._age);   //25，已经修改
console.log(person.tel);    //"86247"，可读属性
person.tel = "13975";
console.log(person.tel);    //"13975"，能够修改

　　属性前面的下划线表示只能经过对象方法访问的属性。当咱们使用person.name时实际上调用的是name属性的getter函数，为person.name赋值时调用的是name属性的setter函数，这样属性和访问器之间的关系就很清晰了。

　　定义多个属性

　　实际上ES5为咱们提供了为一个对象定义多个属性的方法，即Object.defineProperties()，该函数接收两个参数，属性所在的对象以及须要修改的属性及其描述符对象组成的对象，例如把上边的例子修改成一次性定义多个属性，以下：

var person = {
    _name: "Scott",
    _age: 24,
    _tel: 86247
};
Object.defineProperties(person,{
    name:{
        get: function(){
           return this._name; 
        }
    },
    age:{
        set: function(p){
           this._age = p;
        }
    },
    tel:{
        get:function(){
           return this._tel;
        },
        set: function(p){
           this._tel = p;
        }
    }
});

　　读取属性的特性

　　ES5提供了Object.getOwnPropertyDescripter()方法来获取给定属性的描述符。该方法接收两个参数：属性所在的对象和要读取其描述符的属性名称。结果会返回一个对象，若是是访问器属性，返回的对象有configuable、enumerable、get和set；若是是数据属性，这个返回对象的属性包括configuable、enumerable、writable和value。对于上面的例如，使用以下：

var person = {
    _name: "Scott",
    _age: 24,
    _tel: 86247
};
Object.defineProperties(person,{
    name:{
        get: function(){
           return this._name; 
        }
    },
    age:{
        set: function(p){
           this._age = p;
        }
    },
    tel:{
        get:function(){
           return this._tel;
        },
        set: function(p){
           this._tel = p;
        }
    }
});
var descripter = Object.getOwnPropertyDescripter(person,"tel");
console.log(descripter.value);   //undefined
console.log(descripter.enumerable);   //false
console.log(typeof descripter.get);   //"function"

　　上面的代码中获取了person对象的tel属性，因为其是一个访问器属性，因此其value为undefined，enumerable为false，而get为指向getter函数的一个指针。