Javascript # prototype

📝오늘 배운 내용

Javascript에서는 객체를 상속하기 위해 프로토타입이라는 방식을 사용한다. 그래서 Javascript는 프로토타입 기반 언어이기도 하다. 프로토타입 기반 언어란 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이다.
정확히 말해서 상속되는 속성과 메소드들은 각 객체가 아닌 객체의 생성장의 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.prototype === kimcoding.__proto__; // true
Human.prototype.sleep === kimcoding.sleep; // true

아래와 같이 Person이라는 class를 정의하고 person1이라는 인스턴스를 하나 만들었다.

class Person {
  // 속성과 메소드 정의
  constructor(first, last, age, gender, interests) {
  this.first = first;
  this.last = last;
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  }
}

let person1 = new Person('Harry', 'Kane')

위에서 person1의 프로토타입 객체인 Person()에 정의된 멤버들 — age, gender, interests를 볼 수 있다. 또한 — watch, valueOf처럼 Person()의 프로토타입 객체인 Object에 정의된 다른 멤버들도 볼 수 있다. 이는 프로토타입 체인이 동작한다는 증거이다. 즉 person1이 Person class의 속성과 메소드를 가지고 있기 때문에 person1.을 콘솔창에 입력했을 때 저런 그림을 볼 수 있는 것이다.

그렇다면, Object에 정의되어 있는 메소드를 person1에서 호출하게 되면 어떻게 될지 알아보자.

person1.valueof()

이와 같이 콘솔창에 실행을 하게 되면,

• 브라우저는 먼저 person1 객체가 valueof() 메소드를 가지고 있는지 확인한다.
• 확인 후 없다면 person1의 프로토타입 객체(Person() 생성자의 프로토타입)에 valueOf() 메소드가 있는지 확인한다.
• 여기에도 없으니 Person() 생성자의 프로토타입 객체의 프로토타입 객체(Object() 생성자의 프로토타입)가 valueOf() 메소드를 가지고 있는지 확인 후 있으면 호출한다.