[JS] prototype & __proto__

prototype

prototype 객체는 new 키워드에 의해 class 객체의 instance 객체가 만들어질 때 이를 도와주기 위해 생성되는 객체이다.
class 객체의 prototype 속성이 이 prototype 객체를 참조하며, prototype 객체의 constructor 속성은 반대로 class 객체를 참조한다.

class 객체 선언 이후 새로운 메소드를 추가하고 싶을 경우, class 객체의 prototype 속성을 통해 prototype 객체에 메소드를 추가할 수 있다.

예시

// 클래스 선언
class Student {
  constructor(fullName, schoolYear, major) {
    this.fullName = fullName;
    this.schoolYear = schoolYear;
    this.major = major;
  }
  study() {
     return `${fullName} is now studying...`;
  }
}

// 새로운 메소드로 takeExam() 추가
Student.prototype.takeExam = function () {
  return `now starting ${major} exam...`;
};

__proto__

prototype 객체를 통해서는 class 객체의 속성들만 전달 가능하며 메소드들은 전달되지 않는다. 따라서 class 객체의 메소드를 사용하기 위해서는, __proto__ 속성을 통해 메소드를 참조하는 과정이 필요하다.

instance 객체 내부에 생성되는 __proto__ 속성은 class 객체의 prototype 객체를 참조한다.

따라서 원형 class 객체의 prototype 객체에 접근하는 데에는
(원형 클래스 객체).prototype 와 (인스턴스 객체).__proto__ 의 2가지 방법이 있다.

예시

// 클래스 선언
class Student {
  constructor(fullName, schoolYear, major) {
    this.fullName = fullName;
    this.schoolYear = schoolYear;
    this.major = major;
  }
  study() {
     return `${fullName} is now studying...`;
  }
}

const John = new Student("John Snow", 2, "Computer Science");

Student.prototype === John.__proto__ // true
Student.prototype.study === John.study // true

// (John.__proto__) 자체가 this이기 때문에
John.__proto__.study // undefined
Student.prototype.study !== John.__proto__.study // true

원형 class 객체의 prototype 객체에는,
(원형 클래스 객체).prototype 와 (인스턴스 객체).__proto__ 의 2가지 방법으로 접근할 수 있다.

자바스크립트의 모든 객체들은 toString 메소드를 가질까?

" 자바스크립트의 모든 객체는 Object 클래스 내 모든 속성과 메소드를 갖는다 "

코드를 보다 마주친 임의의 instance 객체 정보를 조회하여, 객체 내부의 __proto__ 속성들을 따라 거슬러 올라가보자.

이 instance 객체를 만든 class 객체의 부모 클래스 객체들을 역순으로 찾을 수 있으며, 그 끝에는 모든 자바스크립트 클래스들의 조상인 Object 클래스가 있다.

따라서 자바스크립트의 모든 객체는 Object 클래스 내 모든 속성과 메소드를 가지며, 그 중에는 Object 클래스의 메소드인 toString() 메소드 역시 포함된다.