JS에서 Object.defineProperty () 메서드 사용
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: "女"}
노트:
이 방법을 사용하면 개체 속성을 정확하게 추가하거나 수정할 수 있습니다. 할당 작업에 의해 추가 된 공통 속성은 열거 가능하며 객체 속성을 열거 할 때 열거됩니다 (for ... in 또는 Object.keys 메서드). 이러한 속성의 값을 변경하거나 이러한 속성을 삭제할 수 있습니다. 이 방법을 사용하면 기본 추가 옵션 (또는 구성)을 수정할 수 있습니다. 기본적으로 Object.defineProperty ()를 사용하여 추가 된 속성 값은 변경할 수 없습니다.
매개 변수 descriptor는 객체이며 value속성 외에도 다음과 같은 속성이 있습니다.
configurable
속성의 구성 가능한 키 값이 true 인 경우에만 속성의 설명자를 변경할 수 있으며 해당 개체에서 속성을 삭제할 수도 있습니다.
기본값은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
enumerable
속성의 열거 가능한 키 값이 true 인 경우에만 속성이 개체의 열거 속성에 나타납니다.
기본값은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
}
writable
속성의 쓰기 가능한 키 값이 true 인 경우에만 속성 값, 즉 위의 값이 할당 연산자에 의해 변경 될 수 있습니다.
기본값은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";
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 / setter 메서드를 제공 할 수 있습니다.
- Getter는 속성 값을 얻는 방법입니다.
- setter는 속성 값을 설정하는 방법입니다.
기능의 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 문서 소개를 참조하십시오.