ECMAScript对象属性的类型

ECMAScript对象的属性的类型

理解概念：指的是ECMAScript对象的属性的特征，属性有哪些特征，属性有哪些分类。

一共分两类：数据属性和访问器属性。

数据属性

数据属性特征

1. [[Configurable]]

   表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性。默认true。

2. [[Enumerable]]

   表示能否通过for-in循环返回属性。默认true。

3. [[Writable]]

   表示能否修改属性的值。默认true。

4. [[Value]]

   包含这个属性的数据值。读取属性值的时候，从这个位置读；写入属性值的时候，把新值保存在这个位置。默认true。

修改属性默认特性的方式（理解用，此方法不常用）

ECMAScript5的方法，Object.defineProperty(targetObject, targetProperty, descriptor):

1. targetObject，属性所在的对象；
2. targetProperty，属性的名字；
3. descriptor，描述符（configurable、enumerable、writable和value，注意都是小写）。

//修改writable特性

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

console.log(person.name);  //MirrorAvatar
person.name = "Mudface";  //严格模式（use strict）下，这句会抛出错误
console.log(person.name);  //MirrorAvatar

//修改configurable特性

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

console.log(person.name);  //MirrorAvatar
delete person.name;  //控制台会输出false，严格模式（use strict）下，这句会抛出错误
console.log(person.name);  //MirrorAvatar

//configurable特性的不可逆性
var person = {};
Object.defineProperty(person, "name", {
    configurable: false,
    value: "MirrorAvatar"
});

//抛出错误，控制台输出：TypeError: Cannot redefine property: name
Object.defineProperty(person, "name", {
    configurable: true,
    value: "MirrorAvatar"
});

Object.defineProperty()方法若是不指定configurable、enumerable和writable的时候，都默认是false。

IE8对Object.defineProperty支持不好，请不要在此浏览器上用此方法。

访问器属性

访问器属性特征

1. [[Configurable]]

   表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为数据属性。默认true。

2. [[Enumerable]]

   表示能否通过for-in循环返回属性。对于直接在对象上定义的属性。默认值为true。

3. [[Get]]

   在读取属性时调用的函数。默认值为undefined。

4. [[Set]]

   在写入属性时调用的函数。默认值为undefined。

访问器属性定义

访问器属性不能直接定义，必须使用ECMAScript5的Object.defineProperty()来定义。

var blog = {
    _year: 2015,
    edition: 1
};

Object.defineProperty(blog, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {

        if(newValue > 2015) {
            this._year = newValue;
            this.edition += newValue - 2015;
        }
    }
});

blog.year = 2016;  
console.log(blog.edition);  //2

_year前面的下划线是一种常用的记号，用于表示只能通过对象方法访问的属性。

year这个属性就是所谓的访问器属性。

由控制台输出结果可以发现：设置一个属性值会使其他属性值改变，这是访问器属性的常见使用方式。

访问器属性注意

不需要同时指定getter和setter方法。

1. 只指定getter方法。

   只能读不能写，如果写会被忽略。严格模式（use strict)下，尝试写会抛出错误。

2. 只指定setter方法。

   只能写不能读，如果读返回undefined。严格模式（use strict)下，尝试读会抛出错误。

访问器属性非标准方法

defineGetter()和defineSetter()。两个下划线。

var blog = {
    _year: 2015,
    edition: 1
};

//定义访问器的旧方法
blog.__defineGetter__("year", function() {
    return this._year;
});
blog.__defineSetter__("year", function(newValue) {
    if(newValue > 2015) {
        this._year = newValue;
        this.edition += newValue - 2015;
    }
});

blog.year = 2016;
console.log(blog.edition);  //2

定义多个属性

ECMAScript5定义的Object.defineProperties()方法。

var blog = {};

Object.defineProperties(blog, {
    _year: {
        value: 2015
    },

    edition: {
        value: 1
    },

    year: {
        get: function() {
            return this._year;
        },

        set: function(newValue) {
            if(newValue > 2015) {
                this._year = newValue;
                this.edition += newValue - 2015;
            }
        }
    }
});

blog.year = 2016;
console.log(blog.edition);  // 输出1。为什么是1？不是2？因为还有个属性writable未设置，默认false，不可写。

附录：Object.defineProperties()