[모던 자바스크립트 Deep Dive] 19장 : 프로토타입 - JS

프로토타입

프로토타입이란 간단히 말해 상속을 구현하는 방식이다.

모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있다.

---

프로토타입에 대해 부가설명을 하자면 자바스크립트에서 프로토타입 개념은 프로토타입 객체와 프로토타입 링크를 통틀어 말하고 객체 간 상속을 구현하기 위해 사용된다.

 

❓ 상속이란 무엇일까?

상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다.

 

💨 상속을 사용하는 이유

    - 상속을 사용하면 기존에 있던 코드를 그대로 사용할 수 있기에 코드의 중복을 피할 수 있다.

    - 그렇다는 뜻은 상속을 사용하면 코드의 양이 현저히 줄어든다.

 

 

자바스크립트는 프로토타입을 기반으로 상속을 구현한다

 

 

프로토타입 객체

프로토타입 객체란 객체 간 상속을 구현하기 위해 사용된다. 프로토타입이라고도 부른다.

 

프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공한다. 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

 

프로토타입 링크

자바스크립트에서 객체를 생성할 때, 생성된 객체와 부모 객체, 둘을 이어주는 링크를 말한다.

 

 

💥 __proto__ 프로퍼티

• 모든 객체는 __proto__ 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근할 수 있다.
• __proto__는 접근자 프로퍼티다.
• __proto__ 접근자 프로퍼티는 상속을 통해 사용된다.
• __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다.
• __proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

 

💥 prototype 프로퍼티

• 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다.
• 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않는다.
• 모든 객체가 가지고 있는 __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

 

💥 constructor 프로퍼티

• 모든 프로토타입은 constructor 프로퍼티를 갖는다.
• 함수 객체가 생성될 때, constructor 프로퍼티는 prototype 프로퍼티로 자신이 참조하고 있는 생성자 함수를 가리킨다.

 

---

 

🔥 프로토타입의 생성 시점 🔥

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다.

 

생성자 함수

1. 사용자 정의 생성자 함수
2. 빌트인 생성자 함수

 

1️⃣ 사용자 정의 생성자 함수

console.log(Person.prototype); // { constructor: f }

function Person(name) {
  this.name = name;
}

사용자 정의 생성자 함수는 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.

 

 

2️⃣ 빌트인 생성자 함수

빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다.

 

 

 

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려는 프로퍼티가 없다면 해당 객체의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다.

 

만약 자식 객체가 프로퍼티를 가지고 있다면 부모 객체가 아닌 자신의 프로퍼티를 사용한다.

 

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!