Javascript - 프로토타입 기반 상속 완벽정리

자바스크립트 프로토타입 기반 상속 이해하기

자바스크립트는 객체 지향 프로그래밍 언어이지만, 전통적인 클래스 기반 상속 대신 프로토타입 기반 상속을 사용합니다. 프로토타입 기반 상속은 코드 재사용과 객체 간의 상호작용을 효과적으로 관리할 수 있는 강력한 메커니즘입니다. 이 글에서는 자바스크립트의 프로토타입 기반 상속에 대해 자세히 알아보고, 클래스 기반 상속과의 차이점을 이해하도록 하겠습니다.

1. 프로토타입 기반 상속

자바스크립트에서 모든 객체는 다른 객체를 프로토타입으로 가리키는 숨겨진 속성 [[Prototype]]을 가집니다. 이 프로토타입 객체는 상속되는 속성과 메서드를 가지고 있습니다. 객체에서 속성이나 메서드를 찾을 때, 해당 객체에 해당 속성이나 메서드가 없으면 자바스크립트는 객체의 프로토타입에서 찾습니다. 이 과정은 프로토타입 체인을 따라 계속됩니다.

const animal = {
  eat() {
    console.log("The animal is eating");
  },
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("The dog is barking");
};

dog.bark(); // "The dog is barking"
dog.eat(); // "The animal is eating"

2. 생성자 함수를 사용한 프로토타입 상속

생성자 함수를 사용하면 새로운 객체를 생성할 때마다 객체에 공통된 속성과 메서드를 상속할 수 있습니다. 생성자 함수는 일반적으로 대문자로 시작하며, new 키워드를 사용하여 인스턴스를 생성합니다. 생성된 인스턴스의 프로토타입은 생성자 함수의 prototype 속성을 참조합니다.

function Animal() {}

Animal.prototype.eat = function () {
  console.log("The animal is eating");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function () {
  console.log("The dog is barking");
};

const dog = new Dog();
dog.bark(); // "The dog is barking"
dog.eat(); // "The animal is eating"

3. 클래스 기반 상속과의 차이점

클래스 기반 상속은 객체 지향 프로그래밍에서 일반적으로 사용되는 상속 방식입니다. 클래스를 사용하여 객체의 템플릿(template)을 정의하고, 이를 기반으로 객체 인스턴스를 생성합니다. 클래스 간의 상속은 하위 클래스가 상위 클래스의 속성과 메서드를 재사용할 수 있도록 합니다.

자바스크립트의 프로토타입 기반 상속과 클래스 기반 상속의 차이점은 다음과 같습니다.

프로토타입 체인

프로토타입 기반 상속에서는 객체 간의 상속이 프로토타입 체인을 통해 이루어집니다. 즉, 객체는 다른 객체를 직접 상속하며, 속성과 메서드를 공유할 수 있습니다. 반면, 클래스 기반 상속에서는 클래스 간의 상속이 이루어지며, 상속된 속성과 메서드는 인스턴스에 복사됩니다.

동적 상속

프로토타입 기반 상속은 동적으로 속성과 메서드를 추가, 제거, 변경할 수 있습니다. 객체의 프로토타입에 속성이나 메서드를 추가하면, 해당 프로토타입을 상속하는 모든 객체에 영향을 미칩니다. 클래스 기반 상속에서는 속성과 메서드를 변경할 때, 일반적으로 상속 관계를 다시 정의해야 합니다.

상속 메커니즘

프로토타입 기반 상속에서는 객체의 [[Prototype]] 속성을 통해 상속 관계를 설정합니다. 이를 통해 객체의 프로토타입 체인을 따라 상속된 속성과 메서드를 찾을 수 있습니다. 클래스 기반 상속에서는 클래스 정의를 통해 상속 관계를 설정하며, 인스턴스 생성 시 상위 클래스의 생성자를 호출하여 상속된 속성과 메서드를 초기화합니다.

4. 자바스크립트 클래스

ES6부터 자바스크립트에는 클래스 문법이 도입되었습니다. 클래스 문법은 기존의 프로토타입 기반 상속을 더욱 명확하고 간결하게 표현할 수 있게 해줍니다.

class Animal {
  eat() {
    console.log("The animal is eating");
  }
}

class Dog extends Animal {
  bark() {
    console.log("The dog is barking");
  }
}

const dog = new Dog();
dog.bark(); // "The dog is barking"
dog.eat(); // "The animal is eating"

정리

자바스크립트는 프로토타입 기반 상속을 사용하여 객체 간의 상속을 구현합니다. 프로토타입 기반 상속은 클래스 기반 상속과 비교하여 동적이고 유연한 상속 메커니즘이 가능하며, 객체의 프로토타입 체인을 따라 상속된 속성과 메서드를 찾습니다. ES6에서 도입된 클래스 문법은 프로토타입 기반 상속을 보다 명확하고 간결하게 표현할 수 있지만, 내부적으로는 여전히 프로토타입 기반 상속을 사용합니다.

이 글을 통해 자바스크립트의 프로토타입 기반 상속에 대해 이해하고, 클래스 기반 상속과의 차이점을 파악할 수 있었길 바랍니다. 이러한 지식을 활용하여 자바스크립트로 더 효율적이고 강력한 코드를 작성하는 데 도움이 되길 바랍니다.

저작자표시 비영리 변경금지

아보의 개발블로그