[JavaScript] 프로토타입(Prototype), 상속(Inheritance)

1. 프로토타입(Prototype)

프로토타입(Prototype)은 객체 지향 프로그래밍에서 상속과 관련된 개념입니다. 프로토타입은 객체 간의 상속을 구현하고, 객체가 다른 객체의 속성과 메서드를 공유할 수 있도록 도와줍니다.

모든 객체는 프로토타입을 가지고 있으며, 객체의 프로토타입은 해당 객체를 생성한 생성자 함수의 프로토타입 객체를 가리킵니다. 프로토타입 객체에는 해당 생성자 함수로부터 생성된 모든 객체에서 공유할 수 있는 속성과 메서드가 포함됩니다.

 

2. 상속(Inheritance)

상속은 한 객체가 다른 객체의 속성과 메서드를 상속받아 사용하는 것을 말합니다. 자바스크립트에서는 프로토타입 체인(Prototype Chain)을 통해 상속을 구현합니다. 객체에서 속성 또는 메서드에 접근할 때, 해당 객체의 프로퍼티를 먼저 찾고, 없으면 상위 프로토타입으로 이동하여 찾는 식으로 계속해서 상위 프로토타입을 탐색합니다. 이러한 프로토타입 체인을 통해 상위 객체의 속성과 메서드를 상속받아 사용할 수 있습니다.

 

//생성자 함수 정의
function Person(name) {
  this.name = name;
}

// Person prototype에 greet 메서드 추가
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

//생성자 함수 정의
function Student(name, grade) {
  Person.call(this, name);
  this.grade = grade;
}

// Student의 프로토타입을 Person 객체로 설정 => Student가 Person의 속성과 메서드를 상속
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

const student = new Student('Alice', 10);
student.greet(); // Hello, my name is Alice.

 

* ES6에서 부터는 자바스크립트에서 클래스 문법이 도입되었고, 클래스는 프로토타입 기반의 상속을 쉽게 사용할 수 있도록 해주는 구문입니다.

예를 들어, 위에서 제시한 Person 함수를 클래스로 변경하면 아래와 같습니다.

 

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

 

클래스 문법을 이용하면 프로토타입을 더 간편하게 사용할 수 있으며, 가독성이 좋아지는 장점이 있습니다.