0. ProtoType (기초)

ProtoType

• Object 객체: 객체를 다루는 기본함수(메서드)를 제공 - 모든 객체중 최상위 객체

• Object.prototype: 상속 구현에 사용되는 메커니즘, Object 객체 내에 구성

---

1. Object - Prototype 구조

Object - Prototype 구조

 

Prototype은 Object로부터 상속을 받은 구조이다.

---

2. Prototype의 확장

 

 

Prototype은 일반적인 상속개념과 같이 속성과 메서드의 추가 등 확장이 가능하다.

---

3. Object - keys(), values(), entires()

 

Object.keys() : 객체의 key 값들을 배열로 리턴

Object.values() : 객체의 value 값들을 배열로 리턴

Object.entries() : 객체의 key 값들, value 값들을 배열로 리턴

---

4. Object - assign()

 

Object.assign() : 객체에 다른 객체들의 속성 복사 삽입

---

5. Object - freeze()

 

Object.freeze() : 객체 수정 불가

---

6. Object - seal()

 

Object - seal() : 객체 속성 추가 불가

---

7. Object.prototype

• 상속 구현에 사용되는 메커니즘, Object 객체 내에 구성
• 자바스크립트의 모든 객체가 상속하는 프로토타입 체인의 최상위 객체
• Object.prototype에는 다양한 함수가 정의되어 있다

---

7-1) Object.prototype의 함수

• toString(): 객체의 정보를 문자열로 변환하여 변환
• hasOwnProperty(): 객체가 특정 속성을 직접 소유하고 있는지 여부를 체크 (true/false)
• isPrototypeOf(): 객체가 다른 객체의 프로토타입 체인에 존재하는지 여부를 확인
• ValueOf(): 객체의 원시값 표현을 반환
• toLocaleString(): 객체를 지역화된 문자열로 변환하여 반환
• propertyIsEnumerable(): 특성 속성이 열거 가능한 속성인지 여부를 확인
• Constructor: 객체를 생성한 생성자 함수를 참조

---

8. 생성자 Constructor

 

8-1) 생성자를 이용하여 만든 객체

---

8-2) 생성자를 이용하여 만든 객체 Vs {}로 만든 객체 비교

 

 

생성자를 이용한 객체는 constructor가 재정의 되어있다.

 

 

{}로 만든 객체는 constructor가 재정의 되어있지 않다.

---

9. 객체 Person에 새로운 함수 추가하기

 

Person의 prototype에 속성 hello를 추가하여 함수를 삽입하였다.

 

 

Person의 prototype에 hello가 추가되었다.

9-1) 속성 추가의 Hoisting

코드가 실행되기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 현상을 말한다.

 

 

객체의 생성 및 호출보다 뒤에 추가한 속성 hello가 Person의 prototype에 추가되어있다.

---