JavaScript -- 对象属性

ECMAScript 中有两种数据属性，分别是数据属性和访问器属性，下面来依次介绍。

1. 数据属性

数据属性有四个特性：

configurable : 表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性改为访问器属性。
enumerable : 表示能否 for-in 循环返回属性。
writable : 表示能否修改属性的值。
value : 包含这个属性的值。

需要注意的是，当我们使用不同的方式定义属性的时候，上述四个特性的默认值使不同的。比如对于下面这段代码

var person = {
    "age": "18"
};

var descriptor = Object.getOwnPropertyDescriptor(person, "age");
console.log(descriptor);

浏览器打印出如下信息：

Object
    configurable:true
    enumerable:true
    value:"18"
    writable:true

这就说明，以上面这种方式定义属性的时候，configurable， enumerable, writable 的默认值将会是 true。

而定义属性的方式还有另一种方法，那就是 defineProperty() 方法，这个方法定义的属性 configurable， enumerable, writable 的默认值将会使 false 。

var person = {};

Object.defineProperty(person, "age", {
    value: "22"
});

var descriptor = Object.getOwnPropertyDescriptor(person, "age");
console.log(descriptor);

浏览器打印的消息如下：

Object
    configurable:false
    enumerable:false
    value:"22"
    writable:false

当然，如果我们不满足默认值，在定义的属性的时候可以自己设置，比如我们将 enumerable 设置为 true。

Object.defineProperty(person, "age", {
    enumerable: true,
    value: "22"
});

2. 访问器属性

访问器特性与数据属性的不同之处是，它并没有 value 特性，而是多了一对 setter 和 getter 函数。下面来介绍访问器的四个特性。

configurable : 表示能否通过 delete 删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性改为访问器属性。
enumerable : 表示能否 for-in 循环返回属性。
get : 读取属性时调用的函数。
set ：写入属性时调用的函数。

访问器的属性不可以直接定义，需要借助于 defineProperty()，比如我们为 person 设置一个 name 访问器属性。

var person = {
    _name: "hwaphon"
};

Object.defineProperty(person, "name", {
    get: function() {
        return this._name;
    },
    set: function(value) {
        if (typeof value === "string") {
            this._name = value;
        }
    }
});

注意，_name 属性中的 _ 其实是一种标记，用于表示这个属性只能通过对象方法获得。其实只要你调用 person._name 仍然能获取它的值，所以我感觉使用 _ 像是一种约定。

为什么要使用 set 和 get 呢？是为了对数据进行验证，比如我们在设置年龄的时候，可以检测输入值是否为数字以及是否在合理范围内。

var person = {
    _age: 12
};

Object.defineProperty(person, "age", {
    get: function() {
        return this._name;
    },
    set: function(newAge) {
        if (typeof newAge === "number" && newAge > 0 && newAge <= 150) {
            this._age = newAge;
        } else {
            console.log("not match!");
        }
    }
});

当一个访问器属性只设置了 set 函数时，由于没有 get 函数，所以这个属性是不可读的。

当一个访问器属性只设置了 get 函数时，由于没有 set 函数，所以这个属性使不可写入的。

还有一点值得注意，由于 Objcet.defineProperty() 是 ECMAScript 5 中才出现的，那么在不支持这个方法的浏览器中，该怎么定义 get 和 set 呢？可以借助于两个非标准的方法， __defineGetter__() 和 __defineSetter__()。

var person = {
    _age: 12
};

person.__defineGetter__("age", function() {
    return this._age;
});

person.__defineSetter__("age", function(newAge) {
    if (typeof newAge == "number") {
        this._age = newAge;
    }
});

提示: 方法中使用的是双下划线！

JavaScript -- 对象属性

1. 数据属性

2. 访问器属性

你可能感兴趣的:(JavaScript -- 对象属性)