首页 > 编程笔记 > JavaScript笔记 > JS面向对象编程

JS对象属性描述符详解

在 JavaScript 中，对象的属性也可以用一些关键字来修饰，用以表示当前属性是否可写、是否有默认值、是否可枚举等，这些关键字就是属性描述符。属性描述符是 ECMAScript 5 新增的语法，它其实就是一个内部对象，用来描述对象的属性的特性。

属性描述符的结构

在定义对象、定义属性时，我们曾经介绍过属性描述符，属性描述符实际上就是一个对象。属性描述符一共有 6 个，可以选择使用。

示例1

下面示例演示了使用 value 读写属性值的基本用法。 
var obj = {};  //定义空对象
Object.defineProperty(obj, 'x', {value : 100});  //添加属性x，值为100
console.log(Object.getOwnPropertyDescriptor(obj, 'x').value);  //返回100

示例2

下面示例演示了使用 writable 属性禁止修改属性 x。
var obj = {};
Object.defineProperty(obj, 'x', {
    value : 1,  //设置属性默认值为1
    writable : false  //禁止修改属性值
});
obj.x = 2;  //修改属性x的值
console.log(obj.x);  //1，说明修改失败
在正常模式下，如果 writable 为 false，重写属性值不会报错，但是操作失败，而在严格模式下则会抛出异常。

示例3

enumerable 可以禁止修改属性描述符，当其值为 false 时，value、writable、enumerable 和 configurable 禁止修改，同时禁止删除属性。在下面示例中，当设置属性 x 禁止修改配置后，下面操作都是不允许的，其中 obj.x=5; 若操作失败，则后面 4 个操作方法都将抛出异常。 
var obj = Object.defineProperty({}, 'x', {
    configurable : false  //禁止配置
});
obj.x = 5;  //试图修改其值
console.log(obj.x);  //修改失败，返回undefined
Object.defineProperty(obj, 'x', {value : 2});  //抛出异常
Object.defineProperty(obj, 'x', {writable: true});  //抛出异常
Object.defineProperty(obj, 'x', {enumerable: true});  //抛出异常
Object.defineProperty(obj, 'x', {configurable: true});  //抛出异常
当 configurable 为 false 时，如果把 writable=true 改为 false 是允许的。只要 writable 或 configurable 有一个为 true，则 value 也允许修改。

get 和 set 函数

除了使用点语法或中括号语法访问属性的 value 外，还可以使用访问器，包括 set 和 get 两个函数。其中，set() 函数可以设置 value 属性值，而 get() 函数可以读取 value 属性值。

借助访问器，可以为属性的 value 设计高级功能，如禁用部分特性、设计访问条件、利用内部变量或属性进行数据处理等。

示例1

下面示例设计对象 obj 的 x 属性值必须为数字。为属性 x 定义了 get 和 set 特性，obj.x 取值时，就会调用 get；赋值时，就会调用 set。 
var obj = Object.create(Object.prototype, {
    _x : {  //数据属性
        value : 1,  //初始值
        writable : true
    },
    x : {  //访问器属性
        get : function () {  //getter
            return this._x;  //返回_x属性值
        },
        set : function (value) {  //setter
            if (typeof value != "number") throw new Error('请输入数字');
            this._x = value;  //赋值
        }
    }
});
console.log(obj.x);  //1
obj.x = "2";  //抛出异常

示例2

JavaScript 也支持一种简写方法。针对示例 1，通过以下方式可以快速定义属性。 
var obj = {
    _x : 1,  //定义_x属性
    get x() { return this._x },  //定义x属性的getter
    set x(value) {  //定义x属性的setter
        if (typeof value != "number") throw new Error('请输入数字');
        this._x = value;  //赋值
    }
};
console.log(obj.x);  //1
obj.x = 2;
console.log(obj.x);  //2
取值函数 get() 不能接收参数，存值函数 set() 只能接收一个参数，用于设置属性的值。

操作属性描述符

属性描述符是一个内部对象，无法直接读写，可以通过下面几个函数进行操作。

示例1

在下面示例中，定义 obj 的 x 属性允许配置特性，然后使用 Object.getOwnPropertyDescriptor() 函数获取对象 obj 的 x 属性的属性描述符。修改属性描述符的 set 函数，重设检测条件，允许非数值型数字赋值。 
var obj = Object.create(Object.prototype, {
    _x : {  //数据属性
        value : 1,  //初始值
        writable : true
    },
    x : {  //访问器属性
        configurable : true,  //允许修改配置
        get : function () {  //getter
            return this._x;  //返回_x属性值
        },
        set : function (value) {
            if (typeof value != "number") throw new Error('请输入数字');
            this._x = value;  //赋值
         }
    }
});
var des = Object.getOwnPropertyDescriptor(obj, "x");  //获取属性x的属性描述符
des.set = function (value) {  //修改属性x的属性描述符set函数
                              //允许非数值型的数字，也可以进行赋值
    if (typeof value != "number" && isNaN(value * 1)) throw new Error('请输入数字');
    this._x = value;
}
obj = Object.defineProperty(obj, "x", des);
console.log(obj.x);  //1
obj.x = "2";  //把一个给数值型数字赋值给属性x
console.log(obj.x);  //2

示例2

下面示例先定义一个扩展函数，使用它可以把一个对象包含的属性以及丰富的信息复制给另一个对象。

【实现代码】

function extend (toObj, fromObj) {  //扩展对象
    for (var property in fromObj) {  //遍历对象属性
        if (!fromObj.hasOwnProperty(property)) continue;  //过滤掉继承属性
        Object.defineProperty(  //复制完整的属性信息
            toObj,  //目标对象
            property,  //私有属性
            Object.getOwnPropertyDescriptor(fromObj, property)  //获取属性描述符
        );
    }
    return toObj;  //返回目标对象
}

【应用代码】

var obj = {};  //新建对象
obj.x = 1;  //定义对象属性
extend(obj, { get y() { return 2} })  //定义读取器对象
console.log(obj.y);  //2

控制对象状态

JavaScript 提供了 3 种方法，用来精确控制一个对象的读写状态，防止对象被改变。
同时提供了 3 个对应的辅助检查函数，简单说明如下：

示例

下面代码分别使用 Object.preventExtensions、Object.seal 和 Object.freeze 函数控制对象的状态，然后再使用 Object.isExtensible、Object.isSealed 和 Object.isFrozen 函数检测对象的状态。 
var obj1 = {};
console.log(Object.isExtensible(obj1));  //true
Object.preventExtensions(obj1);
console.log(Object.isExtensible(obj1));  //false
var obj2 = {};
console.log(Object.isSealed(obj2));  //true
Object.seal(obj2);
console.log(Object.isSealed(obj2));  //false
var obj3 = {};
console.log(Object.isFrozen(obj3));  //true
Object.freeze(obj3);
console.log(Object.isFrozen(obj3));  //false

所有教程

优秀文章