JavaScript -- 理解对象的属性

Posted 2020-11-11 hm0818

备注：本文长期修改

说明：ECMAScript中属性有两种：数据属性和访问器属性。

属性描述符

1. 数据属性

说明：当修改或定义对象的某个属性的时候，给这个属性添加一些特性。

特性名称	描述	默认值
value	设置属性的值	undefined
writable	设置是否可修改值	true
enumerable	表示能否通过for-in或 obj.keys()循环返回属性。	true
configurable	表示能否通过 delete 删除属性从而重新定义属性 能否修改属性的特性 能否把属性修改为访问器属性	true

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});
//对象新添加的属性的特性描述
Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false
});

在使用 Object.defineProperty、Object.defineProperties 或 Object.create 函数的情况下添加数据属性，writable、enumerable和configurable默认值为 false。

使用 对象字面量 创建的属性，writable、enumerable和configurable特性默认为true。

2. 访问器属性

说明：设置或获取对象的某个属性的值。

特性名称	描述	默认值
Get	在读取属性时调用的函数	undefined
Set	在写入属性时调用的函数	true
enumerable	是否可以被枚举（使用for...in或Object.keys()）	true
configurable	表示能否通过 delete 删除属性从而重新定义属性 能否修改属性的特性 能否把属性修改为访问器属性(目标属性是否可以再次设置特性)	true

var obj = {};
Object.defineProperty(obj, "newKey", {
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | false
    enumerable: true | false
});

注意：当使用了getter或setter方法，不允许使用writable和value这两个属性

ECMAScript 5中操作属性特性的方法：

1. Object.defineProperty()

说明：此方法只能定义一个属性

语法：

Object.defineProperty(obj, prop, descriptor)

参数列表：

obj：必需。目标对象 
prop：必需。需定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特性

返回值：

传入函数的对象。即第一个参数obj

示例

var obj = {};

// Object.defineProperty(对象，属性，属性描述符)
Object.defineProperty(obj, "name", {
    get: function(){
        return this._name;  //在 get 和 set 中使用访问属性必须加 "_"
    },
    set: function(val){
        if(Array.isArray(val)){
            this._name = val;
        } else{
            this._name = "不是数组不能赋值";
        }
    },
    enumerable: true,       // 表示可枚举的
    configurable: true      // 是否可删除属性
});

// Object {get: function, set: function, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj, 'name')); 

obj.name = "111";
console.log(obj.name);

2. Object.defineProperties()

说明：此方法用来定义多个属性。

var obj = {};

Object.defineProperties(obj, {
    name: {
        value: "周华健",
        writable: true
    },
    age: {
        value: 30,
        writable: true
    },
    sex: {
        get: function(){
            return this._sex;
        },
        set: function(val){
            if(val === 1){
                this._sex = "男";
            }else{
                this._sex = "女";
            }
        }
    }
});

obj.sex = 0;

console.log(obj.sex); //女