IT 노트/JavaScript

[JavaScript] 프로토타입과 상속: 객체 지향 프로그래밍 개념, 프로토타입 체인, 상속 방법

czecze 2024. 7. 10. 09:10
반응형

JavaScript에서 프로토타입과 상속은 객체 지향 프로그래밍의 핵심 개념 중 하나입니다. 이 개념들은 객체들이 속성과 메소드를 공유하고 상속받는 방법을 정의합니다. JavaScript에서는 전통적인 클래스 기반 언어와 달리, 프로토타입을 통한 상속 모델을 사용합니다.

프로토타입 (Prototype)

JavaScript의 모든 객체는 prototype 객체를 가집니다. 이 프로토타입 객체는 다른 객체에 공유 속성(메서드 포함)을 제공하는 데 사용됩니다. 즉, JavaScript의 상속은 프로토타입 객체를 통해 속성과 메서드를 자식 객체에 전달하는 방식으로 이루어집니다.

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

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

const alice = new Person("Alice");
const bob = new Person("Bob");

alice.greet();  // 출력: "Hello, my name is Alice"
bob.greet();    // 출력: "Hello, my name is Bob"

위 예에서, Person 함수는 생성자 역할을 하며, Person.prototype.greet을 통해 모든 Person 인스턴스는 greet 메소드를 공유합니다. 즉, alicebob은 각각 자신의 이름을 가지고 있지만 greet 메소드는 공유합니다.

프로토타입 체인 (Prototype Chain)

프로토타입 체인은 객체가 속성이나 메소드를 찾을 때, 자신의 프로토타입뿐만 아니라 연쇄적으로 상위 프로토타입을 검색하는 메커니즘을 말합니다. 만약 객체 자체에 요청된 속성이나 메소드가 없으면, JavaScript는 객체의 프로토타입에서 찾고, 거기에도 없다면 프로토타입의 프로토타입을 찾는 과정을 계속합니다.

function Animal(sound) {
    this.sound = sound;
}

Animal.prototype.makeSound = function() {
    console.log(this.sound);
};

function Dog(name, sound) {
    Animal.call(this, sound);  // Animal 생성자를 호출하여 'sound' 초기화
    this.name = name;
}

Dog.prototype = Object.create(Animal.prototype); // Dog의 프로토타입을 Animal의 프로토타입으로 설정
Dog.prototype.constructor = Dog; // 생성자를 Dog로 재설정

Dog.prototype.introduce = function() {
    console.log("My name is " + this.name + " and I say " + this.sound);
};

const myDog = new Dog("Rex", "Woof");
myDog.makeSound();   // 출력: "Woof"
myDog.introduce();   // 출력: "My name is Rex and I say Woof"

여기서 Dog 객체는 Animal의 속성과 메소드를 상속받습니다. Dog의 인스턴스인 myDog는 자신의 메소드(introduce)뿐만 아니라, 상속받은 Animal의 메소드(makeSound)도 사용할 수 있습니다. 이는 프로토타입 체인 덕분입니다.

상속 방법

상속을 구현하는 표준 접근 방법은 Object.create()를 사용하여 프로토타입 체인을 설정하는 것입니다. 이 방법은 하위 객체가 상위 객체의 프로토타입을 직접 참조하도록 하여 속성과 메소드를 상속받게 합니다.

위의 DogAnimal 예시가 이를 잘 보여줍니다. 여기서 Dog.prototype = Object.create(Animal.prototype);라인은 Dog의 프로토타입을 Animal의 인스턴스로 설정하여 Animal의 모든 속성과 메소드를 상속받도록 합니다.

이러한 방식으로 JavaScript에서 프로토타입과 상속을 이해하고 사용하면, 코드 재사용성을 높이고, 보다 효율적이고 유지보수가 용이한 애플리케이션을 구축할 수 있습니다.

반응형