자바스크립트는 프로토타입 기반 언어로, 객체 지향 프로그래밍에서 상속을 구현하는 방식이 조금 다를 수 있습니다. 이번 블로그 포스트에서는 자바스크립트의 생성자와 프로토타입 체인을 이용한 상속 구현 패턴을 분석해보겠습니다.

생성자 함수와 프로토타입

자바스크립트에서 생성자 함수는 객체를 생성하기 위한 함수입니다. 생성자 함수를 정의할 때, 일반적으로 this 키워드를 사용하여 생성되는 객체의 프로퍼티와 메서드를 정의합니다.

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

위 예제에서 Person 생성자 함수는 name 프로퍼티를 갖는 객체를 생성합니다. 또한, greet 메서드는 Person.prototype 객체에 추가됩니다.

상속 구현 패턴 분석

이제 상속을 구현하는 패턴을 분석해보겠습니다. 일반적으로 자바스크립트에서 상속을 구현하는 방식은 프로토타입 체인을 활용하는 것입니다.

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

Student.prototype.study = function() {
  console.log(`${this.name} is studying...`);
};

위 예제에서 Student 생성자 함수는 Person 생성자 함수를 호출하고, grade 프로퍼티를 추가합니다. 그리고 Student.prototype 객체를 Person.prototype 객체로부터 상속받도록 설정합니다. 최종적으로 study 메서드를 추가하여 학생의 공부 행위를 정의합니다.

상속 사용 예제

이제 상속을 사용하는 예제를 살펴보겠습니다.

const john = new Person('John');
john.greet(); // 출력: Hello, my name is John

const jane = new Student('Jane', 'A');
jane.greet(); // 출력: Hello, my name is Jane
jane.study(); // 출력: Jane is studying...

위 예제에서 Person과 Student 객체를 생성하여 각각의 메서드를 호출합니다. 이를 통해 상속을 통한 코드의 재사용과 확장성을 확인할 수 있습니다.

마무리

자바스크립트의 생성자와 프로토타입 체인을 이용한 상속 구현 패턴을 살펴봤습니다. 이를 통해 객체 지향 프로그래밍에서 상속이 어떻게 구현되는지 이해할 수 있었습니다. 프로토타입 기반 언어에서 자바스크립트의 상속은 강력하고 유연한 방식으로 사용될 수 있습니다.

#JavaScript #Inheritance