Object.defineProperty方法详解Object.defineProperty(对象,属性名,属性描述对象

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

**Object.defineProperty()** 方法会直接在一个对象上定义一个新属性(可以定义Symbol类型)，或者修改一个对象的现有属性，并返回此对象。

备注： 应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。

**语法：**Object.defineProperty(obj, prop, descriptor)

参数：

obj ：要定义属性的对象
prop 要定义或修改的属性的名称或 Symbol
descriptor 要定义或修改的属性描述符

**返回值：**被传递给函数的对象

备注： 在 ES6 中，由于 Symbol 类型的特殊性，用 Symbol 类型的值来做对象的 key 与常规的定义或修改不同，而Object.defineProperty 是定义 key 为 Symbol 的属性的方法之一。

**描述：**该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for...in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。

对象里目前存在的属性描述符有两种主要形式：

数据描述符

和

存取描述符

。

数据描述符

是一个具有值的属性，该值可以是可写的，也可以是不可写的。

存取描述符

是由 getter 函数和 setter 函数所描述的属性。一个描述符只能是这两者其中之一；不能同时是两者。

属性描述对象：writable/value，set/get这两对不能同时出现（数据描述符和存取描述符不能混合使用）
默认为false

数据描述符：

configurable 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。 默认为 **false**。
enumerable 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。 **默认为 false**。
value 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。 **默认为 undefined**。
writable 当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符 改变。 **默认为 false。**

存取描述符还具有以下可选键值：

get 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。 **默认为 undefined**。
set 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。 **默认为 undefined**。

描述符默认值汇总：

拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。
属性值和函数的键 value、get 和 set 字段的默认值为 undefined。

描述符可拥有的键值：

configurable

enumerable

value

writable

get

set

数据描述符

可以

不可以

存取描述符

可以

不可以

可以

如果一个描述符不具有 value、writable、get 和 set 中的任意一个键，那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

示例：

示例一：

let obj = {
    name:'张三',
    sex:'男'
};
Object.defineProperty(obj,'age',{
    configurable: true, // 是否可以删除， 默认为 false
    enumerable: true, // 是否可以枚举， 默认为 false
    value: 18, // 赋值， 默认为 undefined
})
console.log(obj); // 结果 {name: '张三', sex: '男', age: 18}
console.log(obj.age); // 结果 18

示例二：（错误示例）

let obj = {
    name:'张三',
    sex:'男'
};
Object.defineProperty(obj,'age',{
    configurable: true, // 是否可以删除， 默认为 false
    enumerable: true, // 是否可以枚举， 默认为 false
    value: 18, // 赋值， 默认为 undefined
    get(){
        return 18
    }
})
console.log(obj); 
// 结果 报错：Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
// 无效的属性描述符。不能同时指定访问器和值或可写属性#<Object>
console.log(obj.age);

示例三：（错误示例）

let obj = {
    name:'张三',
    sex:'男',
};
Object.defineProperty(obj,'age',{
    configurable: true, // 是否可以删除， 默认为 false
    enumerable: true, // 是否可以枚举， 默认为 false
    get(){
        console.log('进行读取操作');
        return obj['age']; // 一旦执行obj.age的读取操作，就会触发get，并进入死循环
    },
    set(v){
        console.log('进行修改操作');
        return obj['age'] = v; // obj.age一旦发生变化，就会触发set，并进入死循环
    }
})
console.log(obj);
console.log(obj.age);
obj.age = 28;
console.log(obj.age);
// 报错信息：Error in created hook: "RangeError: Maximum call stack size exceeded"

示例四：

let obj = {
    name:'张三',
    sex:'男',
    _age:18
};
Object.defineProperty(obj,'age',{
    configurable: true, // 是否可以删除， 默认为 false
    enumerable: true, // 是否可以枚举， 默认为 false
    get(){
        console.log('进行读取操作');
        return this._age;
    },
    set(v){
        console.log('进行修改操作');
        return this._age = v;
    }
})
console.log(obj); // 结果：{name: '张三', sex: '男', _age: 18}
console.log(obj.age); // 结果：触发get方法并打印返回值18
obj.age = 28; // 触发set方法
console.log(obj.age); // 结果：触发get方法并打印返回值28