<JavaScript> 프로토타입

MDN 등 여러 곳에서 자바스크립트를 '프로토타입 기반의 동적 언어'로 설명하고 있다.

프로토타입은 자바스크립트를 설명할 때 빠지지 않는 개념이기에 잘 이해하는 것이 중요하다.

 

모든 객체는 자신의 부모와도 같은 프로토타입을 가지고 있으며 이것과 연결되어 있다.

객체가 생성될 때 그 객체의 생성 방식에 따라 prototype 객체도 같이 생성된다.

class Student {
    constructor(name, grade, gender) {
        this.name = name;
        this.grade = grade;
        this.gender = gender;
    }
    study() {
        console.log(this.name + '가 공부를 시작합니다.');
    }
}
 
// 클래스를 이용해 생성한 인스턴스
let chulsoo = new Student('김철수', 3, 'male');

// 프로토타입의 관계 살펴보기
Student.prototype.constructor === Student // true;
Student.prototype === chulsoo.__proto__; // true;
Student.prototype.study === chulsoo.study; // true;

__proto__ 메소드를 통해 프로토타입에 간접적으로 접근할 수 있다. 

.prototype과 .__proto__의 차이

.prototype은 생성자의 속성이고 .__proto__는 개별 객체의 속성이다. (MDN)

 

개인적으로 프로토타입을 이해하는 데에는 ES6 문법보다 ES5 문법이 더 직관적으로 느껴졌다.

// ES5 문법을 기반으로 작성한 Student 클래스
function Student(name, grade, gender) {
  this.name = name;
  this.grade = grade;
  this.gender = gender;
}
 
Student.prototype.study = function() {
  console.log(this.name + '가 공부를 시작합니다.');
}

 

이제 위에 작성했던 클래스와 인스턴스, 프로토타입의 관계를 살펴보는 비교 구문을 보려고 한다.

사실 이들의 관계는 글로 쓰는 것보다 그림으로 보는 것이 더 이해하기 좋다.

코드스테이츠 자료를 참고하여 직접 만듦

 

Student.prototype.constructor === Student // true;

Student 프로토타입의 생성자 함수는 Student이다.

Student.prototype === chulsoo.__proto__; // true;

Student의 프로토타입은 클래스로 생성한 인스턴스 chulsoo의 프로토타입과 같다.

Student.prototype.study === chulsoo.study; // true;

Student의 메소드 study는 chulsoo가 상속받은 study와 같다.