[JavaScript] 17. 프로토타입(2)

📖 모던 자바스크립트 교재) 19장. 프로토타입

 

07. 프로토타입 체인

💡 프로토타입 체인이란?

객체의 프로퍼티(메서드 포함)에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면

자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는 것을 말한다.

 

그렇게 순차적으로 계속 검색하다보면 .. 결국 프로토타입 체인의 종점에 다다르게 된다.

그때의 프로토타입은 Object.prototype이다.

 

💡 프로토타입 체인과 스코프 체인은 서로 협력하여 프로퍼티와 식별자를 검색하는 데 사용된다.

프로토타입 체인 : 상속과 프로퍼티 검색을 위한 메커니즘

스코프 체인 : 식별자 검색을 위한 메커니즘

---

08. 오버라이딩과 프로퍼티 섀도잉

오버라이딩이란?

상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용하는 방식

 

💡 프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면

➡️ 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색 -> 프로퍼티를 덮어씀 X

➡️ 인스턴스 프로퍼티로 추가 O

 

➡️ 인스턴스 메서드는 프로토타입 메서드를 오버라이딩하고, 프로토타입 메서드는 상속 관계에 의해 가려진다.(프로퍼티 섀도잉)

 

💡 프로퍼티를 변경/삭제하는 경우를 살펴보자.

하위 객체를 통해 프로토타입의 프로퍼티를 변경하거나 삭제하는 것을 불가능하다.

➡️ 프로토타입에 직접 접근해야한다.

 

💡 정리 💡

하위 객체를 통해 프로토타입에

get 액세스(프로퍼티 추가)는 허용 O

set 액세스(프로퍼티 변경/삭제)는 허용 X

---

09. 프로토타입의 교체

결론은 .. 프로토타입은 직접 교체하지 않는 것이 좋다!

프로토타입 교체를 통해 객체 간의 상속 관계를 동적으로 변경하는 것은 꽤나 번거롭기 때문이다..

 

그 번거로운 과정을 한번 살펴보자.

1) 생성자 함수에 의한 프로토타입의 교체

프로토타입을 교체하면 교체한 객체에는 constructor 프로퍼티가 없으므로, constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.

➡️ 프로토타입으로 교체한 객체 리터럴에 constructor 프로퍼티를 추가하여 프로토타입의 constructor 프로퍼티를 되살린다.

2) 인스턴스에 의한 프로토타입의 교체

인스턴스의 __proto__ 접근자 프로퍼티를 통해서도 프로토타입을 교체할 수 있다.

이 또한, constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.

➡️ 프로토타입으로 교체한 객체 리터럴에 constructor 프로퍼티를 추가하고, 생성자 함수의 prototype 프로퍼티를 재설정하여 파괴된 생성자 함수와 프로토타입 간의 연결을 되살린다.

---

10. instanceof 연산자

객체 instanceof 생성자 함수

피연산자

좌변 : 객체를 가리키는 식별자

우변 : 생성자 함수를 가리키는 식별자

 

instaceof 연산자는 true/false로 평가된다.

true : 우변의 생성자 함수의 prototype에 바인딩된 객체가 -> 좌변의 객체의 프로토타입 체인 상에 존재 O

false : 존재 X

 

💡 프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수를 찾는 것 X

💡 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인 O

 

❓ 생성자 함수에 의해 프로토타입이 교체되는 경우

construct 프로퍼티와 생성자 함수 간의 연결 파괴 O

but 생성자 함수의 prototype 프로퍼티와 프로토타입 간의 연결은 파괴 X

➡️ instanceof 는 아무런 영향 X

---

11. 직접 상속

1) Object.create에 의한 직접 상속

💡 Object.create 메서드는 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다.

 

💡 위 메서드의 매개변수

첫 번째 매개변수 : 생성할 객체의 프로토타입으로 지정할 객체 전달

두 번째 매개변수 : 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체 전달(생략 가능)

 

💡 Object.create 메서드는 객체를 생성하면서 직접적으로 상속을 구현한다.

이로 인한 장점 3가지

1. new 연산자 없이 객체 생성

2. 프로토타입을 지정하면거 객체 생성

3. 객체 리터럴에 의해 생성된 객체도 상속받을 수 O

 

2) 객체 리터럴 내부에서 __proto__에 의한 직접 상속

Object.create 메서드를 통한 직접 상속이 번거롭다는 것을 해결하기 위한 ..

또 다른 방법이라고 생각하면 된다.

 

 

 

📖 참고자료

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard