Use of Object.defineProperty() method in JS

Use of Object.defineProperty() method in JS

The Object.defineProperty() method directly defines a new property on an object, or modifies an existing property of an object, and returns the object.

Note: This method should be called directly on the Object constructor object, not on any instance of Object type.

Use syntax:

Object.defineProperty(obj, prop, descriptor)

//参数说明：
//obj ：要修改属性或者定义属性的那个目标对象 
//prop :要定义或修改的属性的名称或 Symbol 。
//descriptor： 要定义或修改的属性描述符。。

//返回值：
//被修改后的目标对象

//举个栗子
let myobj = {
    
    
    name: '小肉包',
    age: 25
}
Object.defineProperty(myobj, 'sex', {
    
    
    value: '女'
})
console.log(myobj); // => {name: "小肉包", age: 25, sex: "女"}

note:

This method allows precise addition or modification of object properties. The common attributes added by assignment operation are enumerable and will be enumerated (for...in or Object.keys method) when enumerating object attributes. You can change the value of these attributes or delete these attributes. This method allows to modify the default additional options (or configuration). By default, the property value added using Object.defineProperty() is immutable.

Parameter descriptoris an object, in addition to valueproperties, there are about property:

1. configurable
   If and only if the configurable key value of the attribute is true, the descriptor of the attribute can be changed, and the attribute can also be deleted from the corresponding object.
   The default is false.

//这个属性起到两个作用：
// 1.目标属性是否可以使用delete删除
// 2.目标属性是否可以再次设置特性

//-----------------测试目标属性是否能被删除------------------------
var obj = {
    
    }
//第一种情况：configurable设置为false，不能被删除。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二种情况：configurable设置为true，可以被删除。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined

//-----------------测试是否可以再次修改特性------------------------
var obj = {
    
    }
//第一种情况：configurable设置为false，不能再次修改特性。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错：Uncaught TypeError: Cannot redefine property: newKey

//第二种情况：configurable设置为true，可以再次修改特性。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改特性
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello

2. enumerable
   If and only if the enumerable key value of the attribute is true, the attribute will appear in the enumeration attribute of the object.
   The default is false.

var obj = {
    
    }
//第一种情况：enumerable设置为false，不能被枚举。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:false
});

//枚举对象的属性
for( var attr in obj ){
    
    
    console.log( attr );  
}
//第二种情况：enumerable设置为true，可以被枚举。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false,
    enumerable:true
});

//枚举对象的属性
for( var attr in obj ){
    
    
    console.log( attr );  //newKey
}

3. writable
   If and only if the writable key value of the attribute is true, the value of the attribute, that is, the value above, can be changed by the assignment operator.
   The default is false.

//属性的值是否可以被重写。设置为true可以被重写；设置为false，不能被重写。默认为false。

var obj = {
    
    }
//第一种情况：writable设置为false，不能重写。
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:false
});
//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello

//第二种情况：writable设置为true，可以重写
Object.defineProperty(obj,"newKey",{
    
    
    value:"hello",
    writable:true
});
//更改newKey的值
obj.newKey = "change value";

4. get, set
   When using accessors to describe the properties of attributes, the following properties are allowed to be set:

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

Note: When the getter or setter method is used, the two attributes of writable and value are not allowed

Getter/setter
can provide getter/setter methods when setting or obtaining the value of a certain property of an object.

• Getter is a way to get attribute value
• A setter is a method of setting the value of an attribute.

Use the get/set attribute in the feature to define the corresponding method.

var obj = {
    
    };
var initValue = 'hello';
Object.defineProperty(obj,"newKey",{
    
    
    get:function (){
    
    
        //当获取值的时候触发的函数
        return initValue;    
    },
    set:function (value){
    
    
        //当设置值的时候触发的函数,设置的新值通过参数value拿到
        initValue = value;
    }
});
//获取值
console.log( obj.newKey );  //hello

//设置值
obj.newKey = 'change value';

console.log( obj.newKey ); //change value

See MDN document introduction for details