프로토타입 체인 & toString()

MDN 페이지를 통해 공부한 것을 정리한 내용입니다.

 

프로토타입 체인

자바스크립트는 프로타입 기반 언어라고 불리우는데 그 이유는 프로토타입 방식을 통해 서로 간에 상속하기 때문입니다. 모든 객체들은 메소드와 속성을 상속받기 위해 프로토타입 객체를 가지며, 또 해당 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받아 서로 간의 체인을 이루어져 있습니다. 

 

예를 보겠습니다.

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  var dohpark = new Person("dohpark", 29, "male");

 프로토타입 스코프를 확인하겠습니다.

dohpark은 Person 객체를 상속하며, Person 객체는 Object 객체를 상속하는 것을 확인할 수 있습니다. 이는 프로토타입 체인이 동작한다는 증거입니다. 

 

만약에 Person 객체의 메소드가 아닌 Object 객체의 메소드를 사용한다면 어떻게 될까요?

console.log(dohpark.valueOf());

위와 같이 작성을 하면 아래와 같은 결과를 볼 수 있습니다.

 

Object 객체 메소드를 사용해도 스코프를 타고 내려가 해당 메소드를 불러낼 수 있습니다.

 

toString()

String 오브젝트의 많은 메소드 중에는 toString() 메소드를 확인할 수 있습니다.

const stringObj = new String('string');

console.log(stringObj);
// expected output: String { "string" }

console.log(stringObj.toString());
// expected output: "string"

이 메소드의 역할은 String 객체의 값을 string 값으로 변환입니다.

 

왜 뜬금없이 이 메소드를 소개하냐면 프로토타입 체인을 잘 보여줄 수 있는 메소드이기 때문입니다. String 객체의 toString() 메소드는 Object 객체의 toString() 메소드를 상속을 하여 재정의합니다. 

 

사실 Object 객체의 toString() 메소드는 무조건 재정의를 통해 사용해야합니다.

 

  console.log(dohpark.toString());

 toString()메소드의 재정의 없이 사용해보면 아래와 같은 값을 반환합니다.

 

Object 객체의 toString() 메소드는 사용자 지정 객체에서 재정의 되지 않으면 [object Object]를 반환합니다.

 

 

toString()을 재정의해보겠습니다.

Person.prototype.toString = function personToString() {
  return `${this.name}, ${this.age}, ${this.gender}`;
};

console.log(dohpark.toString());

재정의된 toString()메소드는 아래와 같은 결과를 반환합니다.

 

[object Object]가 아닌 재정의한 값으로 나옵니다.

 

const stringObj = new String('string');

다시 stringObj를 보겠습니다.

 

stringObj의 프로토타입 체인을 확인하시면 String 객체를 상속받는 것을 확인하실 수가 있습니다. 또 String객체는 Object 객체를 상속받아 toString() 메소드를 사용할 수 있습니다.  

 

Object객체 toString() 메소드의 특성 때문에 String 객체는 어쩔 수 없이 toString()를 상속받아 재정의를 하는 것입니다.

 

심화자료

• https://meetup.toast.com/posts/104