[코드스테이츠 44기 프론트엔드 블로깅] 프로토타입과 클래스에 대해

프로토타입이라는 단어는 매우 생소했다. 또한 공부하기도 어려웠다 .. 잘 이해가 안됐던 거같다 ㅜ.ㅜ 조금 더 공부가 필요할 것 같다 !! 그래도 공부해본 프로토타입과 클래스에 대해 정리해보겠다 . 

프로토타입(Prototype) 

프로토타입은 원형 객체를 의미하며 자바스크립트는 프로토타입 기반 언어이다. 

 

프로토타입 기반 언어 ? 

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미

프로토타입 객체도 또 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있고 그 상위도 마찬가지이다. 이를 프로토타입 체인이라고 하며 이에 관한 내용은 다음 블로깅때 정리하겠다. 

 

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

자바스크립트에서는 객체 인스턴스와 프로토타입 간에 연결이 구성되며 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색한다. 많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있다. 

 

아래와 같은 생성자 함수를 정의했다 . (ES5방식)

function Person(first, last) {

  // 속성과 메소드 정의
  this.first = first;
  this.last = last;

}

인스턴스도 하나 생성했다.

let person1 = new Person('Bob', 'Smith');

콘솔창을 열어 person1. 을 쳐보면 해당 객체의 멤버 이름을 자동 완성 팝업으로 보여주고 정의된 멤버 외에도 프로토타입 객체인 Object 에 정의된 다른 멤버들도 확인할 수 있다. ( 프로토타입 체인이 동작한다는 증거) 

Object에 정의된 메소드도 존재하네요 !

만약 person1.valueOf 를 호출하게 된다면 

1. 브라우저는 우선 person1 객체가 valueOf() 메소드를 가지고 있는지 체크

2. 없으므로 person1 프로토타입 객체 Person에 valueOf() 메소드가 있는지 체크

3. 없으므로 Person() 생성자의 프로토타입 객체의 프로토타입 객체 Object()가 valueOf() 메소드를 가지고 있는지 체크 

4. 존재하므로 호출하며 끝  

객체의 값을 단순 반환!

한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아니라 체인을 타고 올라가며 접근하는 것이다.

---

Object.prototype 을 콘솔에 출력해보면 수많은 메소드들이 존재한다. 

이 메소드들은 상속받은 객체에서 사용가능하고 즉 이러한 메소드들은 Object.prototype 에 정의되어 있음을 알 수 있다. 

만약 문자열 객체를 생성했을 때 split() , replace() 등 메소드를 사용할 수 있는 이유 또한 Object.prototype 에 정의되어 있기 때문이다. 

 

프로토타입 객체에 접근하기 위해선 ? 

this 를 통해 현재 객체의 프로토타입 객체를 가리킨다고 생각할 수도 있지만 이는 틀렸다. 포로토타입 객체는 __proto__ 속성으로 접근 가능하다. 

 

OOP패턴으로 구현한 Human 예시 코드

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

위의 실행결과는 모두 true 를 반환한다. 

첫번째의 경우 Human 클래스의 생성자 함수는 Human 이기 때문에 참이다. 

두번째의 경우 Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__ 이므로 참이다. 

세번째의 경우 Human 클래스의 sleep 메서드는 프로토타입에 있으며 Human 클래스의 인스턴스인 kimcoding 에서 kimcoding.sleep으로 사용할 수 있기 때문에 참이다. 

 

클래스-인스턴스-프로토타입 관계 

우리가 흔히 사용하는 배열을 통해 예시를 들어보자면 배열(arr)은 Array 클래스의 인스턴스이며 프로토타입에는 다양한 메서드가 존재한다. 

배열 arr 와 Array, 프로로타입의 관계

 

오늘은 이렇게 프로토타입에 대해 공부했다. 내일 공부할 프로토타입 체인과 같이 공부하면 이해가 더 잘 될것같다! 

 

오늘도 열공 !