JS 프로토타입: 자바스크립트의 상속

자바스크립트에서 프로토타입(prototype)은 자바스크립트에서 상속을 구현하기 위한 방식으로, 다른 객체에 공유 프로퍼티를 제공하는 객체입니다.

자바스크립트에서 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체(prototype object)를 가지고 있습니다. 이 프로토타입 객체는 다른 객체로부터 상속된 속성과 메서드를 가지고 있습니다.

프로토타입 체인(prototype chain)은 자바스크립트에서 객체가 특정 속성에 접근할 때, 해당 객체 자체에 해당 속성이 없다면, 자신의 프로토타입에서 해당 속성을 찾고, 이를 계속해서 상위 타입 객체의 프로토타입에서 찾는 과정을 반복하다가 최종적으로 Object.prototype에서 해당 속성을 찾지 못하면 undefined를 반환하는 것을 말합니다.

 

정리하여 설명하자면, 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있습니다. JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.

(대부분 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다. 즉 __proto__ 참조는 프토타입 체인에서 링크 역할을 합니다.)

프로토타입은 다른 객체로부터 상속을 받으므로, 프로토타입을 수정하면 해당 프로토타입을 상속받은 모든 객체에 영향을 미칩니다. 이를 이용해서, 자식 객체가 공통된 속성과 메서드를 상속받아 사용하는 등 상속 관계를 구현할 수 있습니다.

 

 

프로토타입을 이용한 상속 예제

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

Person.prototype.introduce = function() {
  console.log("Name: " + this.name + " Age: " + this.age);
}

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.study = function() {
  console.log("I'm Student");
}

var kim = new Student("Kim", 25, "A");
kim.introduce(); // "Name: Kim Age: 25"
kim.study();     // "I'm Student"

 

• call() 메서드
  • Java 클래스의 생성자에서 super()를 호출하는 것과 유사합니다.
  • 차이점은 call() 메서드의 첫 번째 인자는 객체여야 하고, 이 객체가 실행 컨텍스트의 역할을 한다는 것입니다.
• Student.prototype = Object.create(Person.prototype)
  • Person 프로토타입 객체를 활용하여 Student 프로토타입 객체를 생성합니다. 
  • Student 생성자 함수에 의해 생성된 객체들은 Person 프로토타입 객체의 속성을 가집니다.
  • Student 객체는 Student 프로토타입을 연결하는 __proto__ 속성을 가지게 됩니다.