Использование метода Object.defineProperty () в JS

Использование метода Object.defineProperty () в JS

Метод Object.defineProperty () напрямую определяет новое свойство объекта или изменяет существующее свойство объекта и возвращает объект.

Примечание. Этот метод следует вызывать непосредственно для объекта-конструктора Object, а не для любого экземпляра типа Object.

Используйте синтаксис:

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: "女"}

нота:

Этот метод позволяет точно добавлять или изменять свойства объекта. Общие атрибуты, добавленные с помощью операции присваивания, являются перечислимыми и будут перечисляться (для ... in или метода Object.keys) при перечислении атрибутов объекта. Вы можете изменить значение этих атрибутов или удалить эти атрибуты. Этот метод позволяет изменять дополнительные параметры (или конфигурацию) по умолчанию. По умолчанию значение свойства, добавляемое с помощью Object.defineProperty (), является неизменным.

Параметр descriptor- это объект, кроме valueсвойств, есть свойство about:

1. configurable
   Если и только если настраиваемое значение ключа атрибута истинно, дескриптор атрибута может быть изменен, а атрибут также может быть удален из соответствующего объекта.
   По умолчанию это 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
   Если и только если перечислимое значение ключа атрибута истинно, атрибут появится в атрибуте перечисления объекта.
   По умолчанию это 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
   Если и только если доступное для записи значение ключа атрибута истинно, значение атрибута, то есть указанное выше значение, может быть изменено оператором присваивания.
   По умолчанию это 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
   При использовании методов доступа для описания свойств атрибутов разрешается устанавливать следующие свойства:

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

Примечание. При использовании метода получения или установки два атрибута: «доступ для записи» и «значение» недопустимы.

Getter / setter
может предоставлять методы getter / setter при установке или получении значения определенного свойства объекта.

• Getter - это способ получить значение атрибута
• Установщик - это метод установки значения атрибута.

Используйте атрибут get / set в функции, чтобы определить соответствующий метод.

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

См. Введение в документ MDN для подробностей.