TIL) 프로토타입 정리

 

JavaScript는 프로토타입(원형 객체) 기반 언어
→ 객체를 상속하기 위해 프로토타입을 이용한다. 

 

상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다.

프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아니고, 체인을 타고 올라가며 접근할 뿐이다.

 

상속 받는 멤버들은 prototype 속성에 정의되어 있다

Object.로 시작하는게 아니라, Object.prototype.로 시작한다. 

 

---

prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체이다. 그래서 Object.is(), Object.keys()등 prototype 버킷에 정의되지 않은 멤버들은 상속되지 않는다. 

 

• 프로토타입 객체: __proto__ 속성으로 접근 가능한 내장 객체
• 프로토타입 속성: 상속시키려는 멤버들이 정의된 객체 // 프로토타입 객체를 참조한다.
• __proto__ : 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 참조하는 링크를 가진다.

 

 

👇👇👇👇👇

Object.prototype

prototype 속성은 Javascript에서 가장 헷갈리는 명칭중 하나이다. 

보통 this가 현재 객체의 프로토타입 객체를 가리킬 것이라 오해하지만 그렇지 않다.(프로토타입 객체는 __proto__ 속성으로 접근 가능한 내장 객체이다!) 그래서 대신에 prototype 속성은 상속 시키려는 멤버들이 정의된 객체를 가리킨다.

 

전역 객체인 String, Date, Number, Array의 프로토타입에 정의된 메소드와 속성들을 체크해 보면, 이 프로토타입 객체들에는 이미 많은 수의 메소드가 정의되어 있는 것을 확인할 수 있다. 

 

var myString = 'This is my string.';

그래서 myString 인스턴스가 생성되는 즉시 split(), indexOf(), replace()등의 문자열을 위한 유용한 메소드들을 사용할 수 있는 이유이다.

 

---

 

모든 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 가지고 있다. 이 constructor 속성은 원본 생성자 함수 자신을 가리키고 있다. 

 

constructor 속성에 괄호를 붙이고 실행하여(인자가 필요하면 전달하구요) 새 인스턴스를 생성하는 트릭이 있다. 어쨌든 생성자도 함수의 일종이므로 괄호를 붙이면 실행할 수 있다.

new 키워드를 통해 실행하면 함수를 인스턴스를 생성하기 위한 생성자로 사용할 수 있다. 

 

prototype에 새 메소드를 추가하는 순간 동일한 생성자로 생성된 모든 객체에서 추가된 메소드를 바로 사용할 수 있다는 점이다.

 

 

---

 

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 클래스의 생성자 함수는 Human니까
Human.prototype === kimcoding.__proto__;   // true - Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__이니까
Human.prototype.sleep === kimcoding.sleep;  // true - Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있으니까

 

 

 

 

👇참고

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes