JavaScript对象属性

对象属性类型

对象的属性类型分两种，一种是数据属性，另一种是访问器属性。

数据属性

一般直接在对象上定义的属性，就是数据属性，如下：

var person = {
    name: "Allan"
};

代码中name这个属性，就是数据属性。

数据属性有四个描述其行为的特性，分别是：
1. [[Configurable]]：表示能否通过delete删除属性从而重新定义属性、能否修改属性的特性、能否把属性修改为访问器属性。默认值为true。
2. [[Enumerable]]：表示能否通过for-in循环返回属性。默认值为true。
3. [[Writable]]：表示能否修改属性的值。默认值为true。
4. [[Value]]：包含这个属性的数据值。默认和为undefined。

想要修改这个特性，则可以用Object.defineProperty( )方法。

我们先创建一个包含name属性，值为”Allan”的person对象。当我们想将name这个属性改成只读，而不可写。就可以像下面的代码那样设置name属性的特性。

var person = {
    name: "Allan"
};

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

person.name = "Apple";
console.log(person.name); // Allan

此时我们可以看到，将name属性的[[Writable]]特性设置为false之后，我们并不能修改name的属性值。

有一点需要注意的是，如果利用Object.defineProperty()来定义属性的时候，如果不指定，configurable、enumerable和writable特性默认值都是false。下面我举个例子。

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

console.log(person.name); // Allan

person.name = "Luohuidong";
console.log(person.name); // Allan

访问器属性

访问器属性跟数据属性最大的区别在于两点。
1. 访问器属性的特性与数据属性的特性不一样。
2. 访问器属性并不能像数据属性那样直接定义，而是必须通过Object.difineProperty( )这个函数来定义。

我们先来看看访问器属性的特性：
1. [[Configuable]]：表示能否通过delete删除属性从而重新定义属性、能否修改属性的特性、或者能否把属性修改为数据属性。默认值为true。
2. [[Enumerable]]：表示能否通过for-in循环返回属性。默认值为true。
3. [[Get]]：这个特性是一个函数，它在读取访问器属性的时候会调用。默认值为undifined。
4. [[Set]]：这个特性也是一个函数，它在写入访问器属性的时候会调用。默认值为undifined。

下面我们来看看如何创建一个访问器属性。

var person = {
  name: "Allan",
};

// 创建一个叫myName的访问器属性
Object.defineProperty(person, "myName", {
  get: function() {
    return this.name;
  },
  set: function(myName) {
    this.name = myName;
  }
});

console.log(person.myName);  // Allan

person.myName = "Luohuidong";
console.log(person.myName);  // Luohuidong

看了我上面举的例子，再看回《JavaScript高级程序设计》P141所举的例子，就会非常清晰了。

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 = 2005;
alert(book.edition); // 2

上面代码中的数据属性_year跟访问器属性year是两个完全不一样的东西。_year和year属性，是通过year属性的get()跟set()联系起来的。

另外要说明一下，get()与set()并非必须成对出现，当只设置get()的时候，意味着访问器属性不能写。当只设置了set()的时候，以为这访问器属性不能读。

定义多个属性

当要同时定义多个属性的时候，就不能再用Object.defineProperty()了，而要使用Object.defineProperties()

var person = {};

Object.defineProperties(person, {
    // 定义了一个数据属性
    name: {
        writable: true,
        value: "Allan"
    },

    // 定义了一个访问器属性
    myName: {
        get: function() {
          return this.name;
        },
        set: function(myName) {
          this.name = myName;
        }
    }
});

读取属性的特性

当我们要读取属性的特性的时候，就需要用到一个叫Object.getOwnPropertyDescription()的函数。

下面我们来看看如何读取属性的特性。

var person = {};

Object.defineProperties(person, {
    // 定义了一个数据属性
    name: {
        writable: true,
        value: "Allan"
    },

    // 定义了一个访问器属性
    myName: {
        get: function() {
          return this.name;
        },
        set: function(myName) {
          this.name = myName;
        }
    }
});

var descriptor1 = Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor1.value,
  ',' + descriptor1.configurable,
  ',' + descriptor1.enumerable,
  ',' + descriptor1.writable
  ); // Allan ,false ,false ,false

var descriptor2 = Object.getOwnPropertyDescriptor(person, "myName");
console.log(descriptor2.configurable,
  ',' + descriptor2.enumerable,
  ',' + descriptor2.get,
  ',' + descriptor2.set
  );
    /*    
        false
        false 
        function () {
          return this.name;
        }
        function (myName) {
          this.name = myName;
        }"
    */