티스토리 뷰
속성 | 설명 |
Object.getOwnPropertyDescriptor() | 주어진 객체 자신의 속성에 대한 속성 설명자(descriptor)를 반환한다. |
Object.getOwnPropertyDescriptors() | 주어진 객체의 모든 속성 설명자를 반환한다. |
Object.defineProperty() | 객체에 직접 새 속성을 정의하거나 객체의 기존 속성을 수정하고 객체를 반환한다. |
Object.defineProperties() | Object.defineProperty()와 동일한 기능 한번에 여러 개의 프로퍼티를 정의/수정 할 수 있다. |
getOwnPropertyDescriptor() 프로퍼티 설명자를 얻는 방법
Object.getOwnPropertyDescriptor(obj, propertyName);
- obj: 정보를 얻고자 하는 객체
- propertyName: 정보를 얻고자 하는 객체 내 프로퍼티
[예제]
let user = {
numbers : {
num1 : 1,
num2 : 2
}
};
Object.getOwnPropertyDescriptor(user, 'numbers');
"평범한 방식"으로 프로퍼티를 만들었기 때문에 플래그는 모두 "true"이다.
Q. "평범한 방식"으로 객체 프로퍼티를 만들었다는것이 무슨 뜻이죠?
아래와 같은 방법으로 만드는 것이 평범한 방식으로 프로퍼티를 만드는 방법입니다.
let user = {
name : 'mill'
};
// 평범한 추가
user.age = 18;
user['blood'] = 'B';
user; // {name: "mill", age: 18, blood: "B"}
getOwnPropertyDescriptors() 프로퍼티 설명자를 한꺼번에 가져오는 방법
Object.getOwnPropertyDescriptors(obj)
[예제]
let user = {
name : 'mill',
age : 15
};
Object.getOwnPropertyDescriptors(user);
defineProperty() 플래그를 (특별한 방식)추가/변경 하는 방법
Object.defineProperty(obj, propertyName, descriptor)
- obj: 적용할 객체 선택
- propertyName: 설명자를 적용하고 싶은 객체 프로퍼티
- descriptor: 적용하고자 하는 프로퍼티 설명자
[propertyName]
객체에 key값이 있을 경우 => 객체의 값이 수정된다.
객체에 key값이 없을 경우 => 새로운 프로퍼티를 만든다.
[descriptor]
descriptor의 플래그 설정을 생략하면 값은 자동으로 "false"가 된다.
[예제]
let user = {
name : 'mill'
};
// age 프로퍼티 추가
Object.defineProperty(user, "age", {
value : 18, // 프로퍼티의 값 설정
// 프로퍼티의 플래그 설정
writable : true
// enumerable 생략
// configurable 생략
// 생략된 플래그 값은 false로 설정된다.
})
// 설명자 확인
Object.getOwnPropertyDescriptor(user, 'age')
defineProperties() 프로퍼티 여러 개를 한번에 정의하는 방법
Object.defineProperties(obj, {
prop1 : descriptor1,
prop2 : descriptor2
// ...
})
[예제]
플래그는 값(value)에 포함돼 있기 때문에 descriptor에 객체 형태로 함께 작성한다.
let user = {};
Object.defineProperties(user, {
name : {value : 'mill', writable: true},
age : {value: 15, configurable: true}
});
프로퍼티 설명자를 한꺼번에 복사하는 방법
Q. for...in을 사용하면 되지 않나요? for...in은 플래그는 복사하지 않습니다.
[for...in이 플래그를 복사하는지 확인해 봅시다.]
//빈 객체를 만든다.
let user = {};
//defineProperties를 사용해서 프로퍼티 추가와 플래그 설정을 한다.
Object.defineProperties(user, {
name : {value:'mill', enumerable:true, configurable:true},
age : {value:15, writable:true, enumerable:true}
})
//잘 설정됐는지 확인
Object.getOwnPropertyDescriptors(user)
//복사할 빈 객체를 만들어 준다.
let forCopy = {};
//for...in을 사용해서 복사한다.
for(let key in user){
forCopy[key] = user[key];
}
Object.getOwnPropertyDescriptors(forCopy)
Q. 그렇다면 플래그는 어떻게 복사하나요?
Object.getOwnPropertyDescriptors(obj)메서드를 Object.defineProperties와 함께 사용한다.
let 저장할 객체 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(복사할 객체));
[예제 (이전의 검증코드를 이어서 작성할 것)]
//flagCopy에 복사하기
let flagCopy = Object.defineProperties({}, Object.getOwnPropertyDescriptors(user));
//플래그가 복사됐는지 확인
Object.getOwnPropertyDescriptors(flagCopy)
[공부 좌표]
Object.getOwnPropertyDescriptor()
[기본 지식]
[참고]
'이론 > JS' 카테고리의 다른 글
[JS] String.prototype.split() (0) | 2021.01.14 |
---|---|
[JS] 데이터 프로퍼티(data property) 플래그 - writable, enumerable, configurable (0) | 2021.01.13 |
[JS] Element. Attribute() 메서드 (0) | 2021.01.05 |
[JS] Node.nodeType (0) | 2021.01.05 |
[JS] 연산자 우선 순위 (0) | 2021.01.05 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 대괄포 표기법
- 일치 연산자
- clinetTop
- property
- offsetTop
- 불일치 연산자
- javascript class
- offsetHeight
- scrollTop
- __proto__
- scrollHeight
- innerHeight
- [[Prototype]]
- 동치 연산자
- outerHeight
- 점 표기법
- clientHeight
- 객체의 프로퍼티
- constructor
- 프로퍼티
- prototype 프로퍼티
- 부등 연산자
- 동등 연산자
- 링크막기 #a링크막기
- @font-face
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
글 보관함