본문 바로가기

자바스크립트-스터디[2021-10-05~완료]

16장 프로퍼티 어트리뷰트

16.1  내부 슬롯과 내부 메서드

 

자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 

ECMA Script 사양에서 사용하는 pseudo property, pseudo method다.

 

[[  ]]
이중 대괄호

로 감싼 이름들이 내부 슬롯, 내부 메서드다.

 

ECMA Script 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 내부 슬롯, 내부 메서드는 실제로 동작함.

하지만 개발자가 직접 접근할 수 있도록 외부에 공개된 객체의 프로퍼티는 아니다.

내부 슬롯, 내무 메서드에 직접적으로 접근, 호출을 불가능하다.

하지만 간접적으로 접근 할 수 있다.

 

내부 슬롯 내부 메서드
모든 객체는
[[Prototype]] 라는 내부 슬롯을 갖는다

__proto__를 통해 접근 할 수 있다
[[Get]] 내부 메서드
[[Set]] 내부 메서드

 

16.2 프로퍼티 어트리뷰트, 프로퍼티 디스크립터 객체

자바스크립트 엔진은 프로퍼티를 생성할 때

프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본 값으로 자동 정의한다.

 

프로퍼티의 상태? 프로퍼티의 상태.. 값.. 갱신..열거..재정의..

프로퍼티 어트리뷰트 == 프로퍼티의 상태 [[내부 슬롯]]  [[Prototype]]
자바스크립트 엔진이 관리하는 내부 상태 값
1) 프로퍼티의 값, [[Value]]
2) 값의 갱신 가능 여부, [[Writable]]
3) 열거 가능 여부, [[Enumerable]]
4) 재정의 가능 여부 [[Configurable]]
  [[내부슬롯]]에 직접적으로 접근 못함
Object.getOwnPropertyDescriptor 로 간접 접근한다

Object.getOwnProperty -> 프로퍼티 디스크립터 객체를 반환

 

없는 프로퍼티(상속 받은 프로퍼티)를 요구하면 undefined를 반환한다

 

Object.getOwnPropertyDescriptors(a);

: 모든 프로퍼티의 (property... ex)a,b,c)

프로퍼티 어트리뷰트 정보를 제공하는 (value, writable, enumerable, configurable)

프로퍼티 디스크립터 객체를 반환한다. 아래 그림 하늘색. 

Object.getOwnPropertyDescriptors(a); 사용

 

16.3 데이터 프로퍼티, 접근자 프로퍼티

 

프로퍼티는 두가지로 나뉜다.

데이터 프로퍼티 접근자 프로퍼티
키: 값
일반적인 프로퍼티
자체적 값이 없다.
다른 데이터 프로퍼티의 값을 읽거나
저장할때
호출되는 접근자 함수로 구성된
프로퍼티
데이터 프로퍼티가 가지는
프로퍼티 어트리뷰트 (==프로퍼티의 상태)
기본값으로 자동 정의한다.
getter, setter

 

1) 데이터 프로퍼티

 

프로퍼티 어트리뷰트 == 프로퍼티 상태 프로퍼티 디스크립터 객체의 프로퍼티 설명
[[Value]] Value 프로퍼티 키를 통해 값에 접근하면 반환된다. 
프로퍼티 키를 통해 값을 변경할 수 있따.
프로퍼티가 없으면 프로퍼티를 동적 생성하고 생성된 프로퍼티의 [[Value]]에 값을 저장한다.
[[Writable]] Writable 프로퍼티 값의 변경 가능 여부를 나타내며 불리언 값이다.
[[Writable]]이 false이면 
프로퍼티의 [[Value]] 값을 변경 못한다.
일기 전용 프로퍼티가 된다
[[Enumerable]] Enumerable 프로퍼티 열거 가능 여부를 나타내며 불리언 값이다.

[[Enumerable]] 가 false인 경우
for..in문
Object.keys 메서드로 열거 할 수 없다.

[[Configurable]] Configurable 프로퍼티 재정의 가능 여부를 나타내며 불리언 값이다.
[[Configurable]]가 false라면 프로퍼티 삭제, 프로퍼티 상태 값 변경이 금지된다. 

예외
[[Writable]] true라면
[[Value]] 변경과 
[[Writable]] false로 변경 가능.

2) 접근자 프로퍼티

자체적으로 값이 없다.

다른 데이터 프로퍼티의 값을 읽거나, 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다.

getter, setter

프로퍼티 어트리뷰트 == 프로퍼티 상태 프로퍼티 디스크립터 객체의 프로퍼티 설명
[[Get]] get 접근자 프로퍼티를 통해 데이터 프로퍼티 값을 읽을 때 호출되는 접근자 함수.

접근자 프로퍼티 키로 접근하면
프로퍼티 어트리뷰트 [[Get]]의 값
getter함수가 호출되고 
프로퍼티 값으로 반환한다
[[Set]] set 접근자 프로퍼티를 통해 데이터 프로퍼티의 값을 저장할 때 호출되는 접근자 함수. 

접근자 프로퍼티 키로 값을 저장하면
프로퍼티 어트리뷰트 [[Set]]의 값
setter 함수가 호출되고 
프로퍼티 값으로 저장한다.
[[Enumerable]] enumerable 데이터 프로퍼티의 열거
[[Configurable]] configurable 데이터 프로퍼티의 설정 변경 가능

 

person 객체의 firstNamelastName 프로퍼티는 일반적인 데이터 프로퍼티다.

키: 값 

fullName 프로퍼티접근자 프로퍼티다.

접근자 프로퍼티는 자체적으로 값을 가지지 않으며 (프로퍼티 어트리뷰트 [[Value]] 없음)

 

그냥 프로퍼티랑 프로퍼티 메소드랑 결과가 다르게 나오네

접근자 프로퍼티 fullName으로

프로퍼티 값에 접근하면 내부적으로 [[Get]] 내부 메서드가 호출된다.

 

 

프로퍼티 키가 유효한지 확인한다
프로퍼티 키는 문자열 또는 심벌이어야 한다
프로퍼티 키 fullName은 문자열이다 
프로토타입 체인에서 프로퍼티를 검색한다. person객체에 fullName 프로퍼티가 존재한다.
검색된 fullName 프로퍼티가
데이터 프로퍼티인지
접근자 프로퍼티인지 확인한다.
fullName 프로퍼티는 접근자 프로퍼티다.
fullName(...)
접근자 프로퍼티
fullName프로퍼티 어트리뷰트
[[Get]]의 값 ==

getter함수를 호출 --> 결과 반환
fullName프로퍼티 어트리뷰트
[[Get]]의 값 ==

Object.getOwnPropertyDescriptor(person, 'fullName'); 
객체의 get 프로퍼티 값과 같다.




 

데이터 프로퍼티 - 접근자 프로퍼티 구별 방법

Object.getOwnPropertyDescriptor(객체 대상, 프로퍼티 이름) 했을 때

반환되는 프로퍼티 디스크립터 객체의 프로퍼티가 다르다.

이것으로 구분하라.

데이터 프로퍼티, 접근자 프로퍼티는 반환 값이 다르다. 이것으로 구분한다.

 

데이터 프로퍼티 접근자 프로퍼티
configurable
enumerable

value
writable
configurable
enumerable

get
set

 

 

16.4 프로퍼티 정의

프로퍼티 상태(프로퍼티 어트리뷰트)로 프로퍼티를 정의한다.

이것의 값은? 변경 가능한가? 열거 가능한가? 상태 변경이 가능한가?

Object.defineProperty(대상 객체, 집어 넣을 프로퍼티 이름, 설정 값);

 

Object.defineProperty(객체, '추가 객체 이름', {설정값});

설정값에서 누락하면 기본으로 false, undefined가 된다.

아니 firstName 말고 lastName은 왜 안나옴????

당연하지!!
lastName의 [[Enumerable]] 이 false라서 안 나오는거야~

value 안 변함. 열거 안됨

 

 

Object.defineProperty(person, 'fullName', {
    get() { return `${this.firstName} 과 ${this.lastName}`;},
    set(name){ [this.firstName, this.lastName] = name.split(' ');},
    enumerable: true,
    configurable: true
    }
);

Object.getOwnPropertyDescriptors(person)

person.fullName

person.fullName = '조유란 cho';

person.fullName

 

 

defineProperty(대상객체, '추가 프로퍼티 이름') 메서드로 프로퍼티 정의하기

 

 

 

 

16.5 객체 변경 방지

 

객체는 변경 가능하다.

재할당 없이 변경 가능하다.

프로퍼티를 추가, 삭제 할 수 있다.
프로퍼티 값을 갱신 할 수 있다.
프로퍼티 어트리뷰트(프로퍼티 상태: 값, 나열, 변경 가능)을 재정의 할 수 있다.

 

금지 강도가 다르다

프로퍼티 추가 방법?

1) 동적 추가 person.name = '한정원'; // 동적 추가
2) 프로퍼티 정의에 의한 프로퍼티 추가
Object.defineProperty
Object.defineProperty(person, 'name', {value: '한정원'});

 

 

프로퍼티 추가 -> 확장

확장을 확인하는 메소드?

Object.isExtensible(대상객체)

 

'자바스크립트-스터디[2021-10-05~완료]' 카테고리의 다른 글

18장 함수와 일급 객체  (0) 2022.01.12
[27.8] 배열 메서드  (0) 2022.01.10
[27장] 배열  (0) 2021.12.30
25장 클래스  (0) 2021.12.18
[24 클로저]  (0) 2021.12.11