2-2. [JavaScript] 프로토타입

 

# 프로토타입

 

JavaScript는 프로토타입(Prototype) 기반 언어입니다. 여기서 프로토타입은 원형 객체를 의미합니다.

 

JavaScript는 프로토타입 기반 언어입니다.
프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현합니다.

 

흠...🤔 이게 무슨...무슨뜻이지?

챗 지피티의 설명!

프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속되며, 이 상속 관계를 "프로토타입 체인"이라고 합니다. 
간단히 말하면, 모든 JavaScript 객체는 다른 객체를 상속하고, 그 상속된 객체는 또 다른 객체를 상속할 수 있습니다. 
이러한 체인을 따라 객체는 부모 객체의 프로퍼티 및 메서드를 사용하거나 재정의할 수 있습니다.

JavaScript에서 프로토타입을 사용하여 객체 간 상속을 구현할 때, 
부모 객체의 프로퍼티와 메서드가 자식 객체로 상속됩니다. 
이로써 코드를 재사용하고, 객체 간에 관계를 설정하며, 다형성을 지원할 수 있습니다. 

이것이 객체 지향 프로그래밍의 "상속" 개념입니다.
프로토타입 기반 언어에서 객체를 만들고 상속을 구현하기 위해 프로토타입 객체가 사용됩니다. 

객체의 프로토타입은 다른 객체를 참조하며, 이를 통해 상속된 프로퍼티와 메서드를 사용할 수 있습니다.
JavaScript에서 프로토타입 기반 언어의 특징 중 하나는 동적인 언어로서 객체의 구조를 런타임에 변경할 수 있다는 것입니다. 

이로써 객체의 프로퍼티 및 메서드를 추가, 제거, 또는 수정할 수 있으며, 이는 매우 유연한 프로그래밍 환경을 제공합니다.
즉, 프로토타입 기반 언어의 특징을 이용하여 상속과 객체 지향 프로그래밍을 구현할 수 있습니다.

 

---

 

# 프로토타입 체인

 

 

프로토타입 체인(Prototype Chain)은 JavaScript에서 객체 간의 상속을 구현하는 메커니즘입니다.
JavaScript에서 모든 객체는 다른 객체를 상속할 수 있으며,
이 상속 관계가 연속적으로 이어지는 것을 프로토타입 체인이라고 합니다.

프로토타입 체인은 객체가 특정 프로퍼티나 메서드를 찾을 때 사용됩니다.
만약 객체가 특정 프로퍼티나 메서드를 직접 가지고 있지 않으면
JavaScript는 이 객체의 프로토타입(부모) 객체에서 해당 프로퍼티나 메서드를 찾으며,
계속해서 부모 객체의 프로토타입 체인을 따라 올라가며 검색합니다.

프로토타입 체인을 이용하면 코드에서 한 객체로부터 다른 객체에게 프로퍼티와 메서드를 상속할 수 있습니다.
이를 통해 객체 간 코드 재사용과 확장이 가능해지며, 객체 지향 프로그래밍의 상속 개념을 지원합니다.

프로토타입 체인은 JavaScript의 핵심 기능 중 하나이며,
객체 지향 프로그래밍과 동적인 프로그래밍 환경을 제공하는 데 중요한 역할을 합니다.
객체가 프로토타입 체인을 따라 부모 객체로부터 상속받은 프로퍼티와 메서드를 사용할 수 있으므로
코드의 유연성과 확장성을 제공합니다.

 

---

# .prototype

 

JavaScript에서 모든 객체는 프로토타입(Prototype)이라고 불리는 특별한 객체를 가지고 있습니다. 

이 프로토타입 객체에는 다른 객체가 상속하거나 공유할 수 있는 메서드와 프로퍼티가 정의됩니다. 

각 객체가 자신의 프로토타입을 참조하며, 이 프로토타입에 정의된 메서드와 프로퍼티에 접근할 수 있습니다. 

JavaScript에서 `prototype`은 주로 함수 객체와 연관이 있으며, 

함수 객체의 `prototype` 프로퍼티를 통해 해당 함수를 생성자로 사용하여 만들어진 객체들이 공유하는 프로토타입 객체를 설정합니다.

여기서 몇 가지 중요한 포인트를 설명합니다:

1. 객체 생성과 프로토타입 : 객체를 생성할 때, 해당 객체의 프로토타입이 결정됩니다.

예를 들어, `new` 키워드를 사용해 생성된 객체는 생성자 함수의 `prototype` 프로퍼티에 연결된 프로토타입을 상속받습니다.

2. 프로토타입 체인 : JavaScript에서 객체는 프로토타입 체인을 통해 여러 개의 프로토타입을 따라갈 수 있습니다.

객체에서 특정 프로퍼티나 메서드를 찾을 때, 프로토타입 체인을 따라 부모 객체의 프로토타입까지 올라가며 검색합니다.

3. 함수와 프로토타입 : 함수는 JavaScript에서 중요한 역할을 합니다.

함수 객체의 `prototype` 프로퍼티에 정의된 메서드와 프로퍼티는 해당 함수를 생성자로 사용하여 만든 객체들과 공유됩니다.

이를 통해 모든 객체가 일반적인 메서드나 프로퍼티를 공유할 수 있습니다.

4. 프로토타입 상속 : JavaScript의 객체는 프로토타입 상속을 통해 기존의 메서드와 프로퍼티를 상속받아 확장하거나 수정할 수 있습니다. 이는 코드의 재사용성과 유연성을 높입니다.

프로토타입과 프로토타입 체인은 JavaScript의 중요한 개념 중 하나이며, 

객체 지향 프로그래밍 패턴을 지원하고 코드 재사용성을 증가시킵니다.

 

 

---

 

# .__proto__

 

.__proto__는 JavaScript 객체가 자신의 프로토타입을 가리키는 프로퍼티입니다. 

객체는 프로토타입을 가지고 있으며, .__proto__를 통해 해당 객체의 프로토타입에 접근할 수 있습니다. 

이를 사용하여 객체 간의 상속 및 프로토타입 체인을 따라갈 수 있습니다.

예를 들어, 다음과 같은 코드를 고려해 봅시다:

 

 

const person = {
  name: 'John',
  age: 30,
};

const student = {
  major: 'Computer Science',
};

student.__proto__ = person;

 

 

위 코드에서 student 객체는 person 객체를 프로토타입으로 갖습니다. 

student 객체의 major 프로퍼티를 직접 접근할 수 있고, 

student 객체에서 찾을 수 없는 프로퍼티나 메서드를 찾을 때 프로토타입 체인을 따라 person 객체에서 찾습니다. 

이때 student.__proto__는 person 객체를 가리킵니다.

이렇게 .__proto__를 사용하여 객체의 프로토타입에 접근할 수 있지만, 

이것은 ECMAScript 2015 (ES6)에서 권장되지 않는 방법입니다. 

 

대신, Object.getPrototypeOf() 메서드를 사용하거나 

Object.setPrototypeOf() 메서드를 사용하여 프로토타입을 설정하는 것이 더 안전하며 권장됩니다.

 

 

---

 

 

# Object

 

 

JavaScript에서 `Object`는 모든 객체의 기본 프로토타입 객체입니다.

 모든 객체는 `Object`를 상속하며, `Object` 객체의 프로토타입 체인을 따라 기본적인 객체 기능을 상속합니다. 

이것은 JavaScript에서 객체 지향 프로그래밍을 구현하는 데 중요한 역할을 합니다.

`Object` 객체는 다양한 메서드와 프로퍼티를 제공합니다. 몇 가지 일반적인 `Object` 메서드와 프로퍼티는 다음과 같습니다:

1. `Object.create(proto, [propertiesObject])`: 새로운 객체를 생성하고 지정된 프로토타입 객체 (`proto`)를 설정합니다.

 두 번째 매개변수 `propertiesObject`는 객체의 속성을 정의하는데 사용됩니다.

2. `Object.keys(obj)`: 객체의 열거 가능한 속성 이름을 배열로 반환합니다.

3. `Object.values(obj)`: 객체의 열거 가능한 속성 값들을 배열로 반환합니다.

4. `Object.entries(obj)`: 객체의 열거 가능한 속성들을 [키, 값] 쌍으로 구성된 배열로 반환합니다.

5. `Object.assign(target, ...sources)`: 하나 이상의 소스 객체에서 열거 가능한 모든 속성을 대상 객체로 복사합니다.

6. `Object.hasOwnProperty(prop)`: 객체가 특정 속성을 직접 소유하고 있는지 여부를 나타내는 불리언 값을 반환합니다.

7. `Object.prototype`: 모든 객체의 프로토타입을 나타내는 객체입니다. 

모든 객체에서 공유하는 기본 메서드와 프로퍼티를 제공합니다.

이러한 `Object`의 메서드와 프로퍼티를 사용하여 JavaScript에서 객체를 다룰 때 유용한 작업을 수행할 수 있습니다.

 

 

---

 

참고 사이트:

 

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript#ecmascript_2015_%ED%81%B4%EB%9E%98%EC%8A%A4

 

 

Classes in JavaScript - Web 개발 학습하기 | MDN

 

 

---

 

 

# DOM과 프로토타입

 

브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있습니다. 

이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스입니다.

DOM 엘리먼트는 예를 들어 innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있습니다. 

각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해, Element라는 공통의 부모가 있음을 알 수 있습니다.

화살표 방향은 부모를 가리킵니다. EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재합니다.

인스턴스의 __proto__를 이용하면 이를 더 확실하게 확인할 수 있습니다. 

__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.

 

---

 

 

끝 🤔