S2 . 프로토타입

용어정리 : prototype, constructor, this 그리고 속성과 메소드

---

• prototype : 모델의 청사진을 만들때 쓰는 원형 객체, 클래스가 일종의 프로토타입이다.
• constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수
• this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context
  : new 키워드로 인스턴스를 생성했을 때 → 해당 인스턴스가 바로 this의 값이 된다.
  
  

프로토타입(prototype)과 프로토타입 체인(- chain)

---

• MDN 정의에 따르면 프로토타입은 ‘원형객체’ 라고 하는데, 좀 더 쉽게 설명하자면 → 일종의 유전자이다.
• 프로토타입은 ‘상속’ 속성을 가지고 있어 → 부모 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있다(프로토체인)
• 객체 인스턴스와 프로토타입 간의 연결은 **.__proto__** 로 표현하며, 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색한다.
• **.__proto__ : 생성자인 prototype 속성에서 파생, `.proto**`으로 객체 인스턴스에 구현한다.

💡 ECMAScript 2015부터는 `Object.getPrototypeOf(obj)` 함수를 통해 객체의 프로토타입 객체에 **바로 접근할 수 있다!**

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let kimcoding = new Human('김코딩', 30);

// 실습해보세요
Human.prototype.constructor === Human;  // --> true
Human.prototype === kimcoding.__proto__; // --> true
Human.prototype.sleep === kimcoding.sleep; //// --> true

//Human 클래스의 인스턴스인 kimcoding은 Human의 prototype을 상속받고 있기 때문이다.

💡 JavaScript는 프로토타입 기반언어 ?

---

Javascript는 흔히 ‘프로토 기반 언어’라고 불린다. 모든 객체들이 메소드와 속성을 상속받기 위한 템플릿으로써 ‘프로토타입 객체’를 가진다.

프로토타입은 ‘프로토타입 체인’ 이라는 특성을 가지고 있는데 → 이는 상위(부모) 프로토타입 객체의 메소드와 속성을 상송받을 수 있음을 의미한다. 따라서 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있다.

클래스와 인스턴스 그리고 프로토타입의 관계

---

그리고 Array 클래스와 인스턴스, 프로토타입의 관계

---

• Array도 클래스이다. 지금까지 써왔던 배열은 Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드를 가진다.

__proto__ 를 이용하여 프로토타입 체인의 과정을 살펴보자

---

let div = document.createElement('div');

div.__proto__  //--> HTMLDivElement
div.__proto__.__proto__ //--> HTMLElement
div.__proto__.__proto__.__proto__ //--> Element
div.__proto__.__proto__.__proto__.__proto__ //--> Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ //--> EverTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //--> Constructor..
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ //--> null

• 주요 노드 프로퍼티
  
  Java.Info_주요 노드 프로퍼티