第十四章 对象的属性类型补充

属性类型

ECMA5弄了一个新东西, 就是用户可以通过Object.defineProperty配置属性的可写,可配置,可枚举, 让我们开发者可以定义一些属性。

ECMA有两种属性:数据属性,访问属性。

1. 数据属性

数据属性有4个可描述其行为特征得特性,分别是configurable(可配置),enumerable(可枚举),writable(可写入),value(值)

以往我们创建一个对象,并添加一个属性的方式:

var obj = {};
obj.name = '李白';

console.log(obj.name);
// 李白
obj.name = '李小白';
console.log(obj.name);
// 李小白

现在也可以用Object.defineProperty这种方式:

Object.defineProperty(对象, 属性名, 描述符对象);

var obj = {};

Object.defineProperty(obj, 'name', {
    value: '李白'
});

console.log(obj.name);
// 李白
obj.name = '李小白';
console.log(obj.name);
// 李白

咦,我明明修改了obj.name为什么再次输出的还是李白?

数据属性有四种特性,分别是configurable(可配置),enumerable(可枚举),writable(可写入),value(值)。如果通过以上方法创建一个属性,默认的可配置,可枚举,可写入得属性的值为false。所以不生效。

看到这几个属性,我们立刻想到,那修改可写入这一项为true可以吧,我们来试试writable属性。

var obj = {};

Object.defineProperty(obj, 'name', {
    value: '李白'
});
Object.defineProperty(obj, 'name', {
    writable: true,
    value: '杜甫'
});

// demo.js:6 Uncaught TypeError

代码执行到第6行直接报错,不再继续执行。为什么,因为默认的configurable属性为false,所以不可配置。也就是说,在第一次通过Object.defineProperty这个方法创建的时候未开启可配置属性,以后都无法更改其他特性,也包括可配置这个特性。所以只有两种方法可以解决这个问题,在创建这个属性的同时就给可配置为true,或者在第一次配置的时候就给可写为true。

Object.defineProperty(obj, 'name', {
    configurable: true,
    value: '李白'
});
Object.defineProperty(obj, 'name', {
    writable: true,
    value: '李白'
});

那现在剩下了enumerable属性,这个属性有什么作用呢?

var obj = {a: 1, b: 2, c: 3};
Object.defineProperty(obj, 'd', {
    value: 4
});

for(var k in obj) {
    console.log(k);
}
// a   b   c

enumerable默认为false得情况下,for in 循环只遍历到了abc这三个属性。

Object.defineProperty(obj, 'd', {
    enumerable: true,
    value: 4
});

for(var k in obj) {
    console.log(k);
}
// a   b   c   d

属性改为true的情况下,可以遍历到了,这也就是可枚举。

Object.defineProperties

可以一次定义多个属性, 方便快捷

var obj = {};

Object.defineProperties(obj, {
    a: {value: 1},
    b: {value: 2},
    c: {value: 3}
});

console.log(obj);
// {a: 1, b: 2, c: 3}

Object.getOwnPropertyDescriptor

这个属性可以罗列出属性的上述四种特性,接上代码在控制台:

MacHi 2019-02-14 14-01-48.png

2. 访问器属性

访问器属性不包含数据值,它们包含一对getter和setter函数(非必须),在读取访问器属性时,调用了getter函数,这个函数负责返回有效的值。在写入访问器属性的时候,回调用setter属性,这个函数负责决定如何处理数据。访问器有四个特性,分别是configurable(可配置),enumerable(可枚举),get(读取属性调用的函数),set(设置属性调用的函数)

set和get

var obj = {
    _year: 2019,
    edition: 1
};

Object.defineProperty(obj, 'year', {
    get: function () {
        return this._year;
    },
    set: function (newValue) {
        if (newValue > 2019) {
            this._year = newValue;
            this.edition += newValue - 2019;
        }
    }
});

obj.year = 2020;
console.log(obj.edition);

你可能感兴趣的:(第十四章 对象的属性类型补充)