JavaScript의 프로토타입 체인과 상속 이해하기

JavaScript의 프로토타입 체인과 상속 이해하기

JavaScript는 프로토타입 기반의 객체 지향 언어입니다. 이 글에서는 JavaScript의 프로토타입 체인과 상속에 대해 알아보겠습니다. 개발자들이 일하다가 모르는게 있으면 검색해서 찾아볼 내용으로 삼을 수 있습니다.

프로토타입 (Prototype)

JavaScript에서 모든 객체는 다른 객체의 프로토타입을 가질 수 있습니다. 프로토타입은 객체 간에 공유되는 속성과 메서드를 정의합니다. 객체의 프로토타입은 __proto__ 속성 또는 Object.getPrototypeOf() 메서드를 통해 접근할 수 있습니다.
​
예제:

const animal = {
    speak: function() {
        console.log("The animal speaks");
    }
};

const dog = Object.create(animal);
dog.speak(); // The animal speaks

프로토타입 체인

객체가 특정 속성이나 메서드를 찾을 때, 해당 객체에서 찾지 못하면 프로토타입 체인을 따라 위로 올라가면서 찾게 됩니다. 이 과정은 프로토타입 체인의 최상위에 도달할 때까지 이루어집니다.
​
예제:

const animal = {
    speak: function() {
        console.log("The animal speaks");
    }
};

const dog = Object.create(animal);
const bulldog = Object.create(dog);

bulldog.speak(); // The animal speaks

상속

JavaScript에서 상속은 프로토타입 체인을 통해 이루어집니다. 객체를 생성할 때 Object.create() 메서드를 사용하여 부모 객체의 프로토타입을 지정할 수 있습니다.
​
예제:

const animal = {
    speak: function() {
        console.log("The animal speaks");
    }
};

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

const bulldog = Object.create(dog);
bulldog.speak(); // The animal speaks
bulldog.bark(); // The dog barks

클래스를 사용한 상속

ES6부터 도입된 클래스를 사용하여 상속을 구현할 수도 있습니다. class 키워드를 사용해 클래스를 정의하고, extends 키워드를 사용해 상속을 표현할 수 있습니다.
​
예제:

class Animal {
    speak() {
        console.log("The animal speaks");
    }
}

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

const bulldog = new Dog();
bulldog.speak(); // The animal speaks
bulldog.bark(); // The dog barks

이 글에서는 JavaScript의 프로토타입 체인과 상속에 대해 간략하게 소개했습니다. 프로토타입 체인은 객체 간에 속성과 메서드를 공유하고 상속을 가능하게 합니다. 프로토타입 체인과 상속을 이해하고 활용하면 코드를 재사용하고 모듈화하는데 도움이 됩니다.

프로토타입 메서드 오버라이딩

상속받은 객체는 부모 객체의 메서드를 그대로 사용할 수 있으며, 필요한 경우에는 메서드를 오버라이딩하여 새로운 구현을 제공할 수 있습니다.
​
예제:

const animal = {
    speak: function() {
        console.log("The animal speaks");
    }
};

const dog = Object.create(animal);
dog.speak = function() {
    console.log("The dog barks");
};

const bulldog = Object.create(dog);
bulldog.speak(); // The dog barks

프로토타입 체인의 성능

프로토타입 체인을 통한 속성 접근은 객체 자신의 속성에 비해 상대적으로 느릴 수 있습니다. 따라서 성능에 민감한 경우에는 프로토타입 체인을 최소화하거나 캐싱 기법을 사용하여 최적화할 수 있습니다.
​
예제:

const animal = {
    speak: function() {
        console.log("The animal speaks");
    }
};

const dog = Object.create(animal);
dog.speak = function() {
    console.log("The dog barks");
};

const bulldog = Object.create(dog);

// 캐싱
const speak = bulldog.speak;
speak(); // The dog barks

결론

JavaScript에서 프로토타입 체인과 상속은 코드 재사용성과 모듈화를 높이는 데 중요한 역할을 합니다. 이 글을 통해 프로토타입 체인과 상속을 이해하고 활용하는 방법에 대해 배웠습니다. 이러한 기술을 활용하면 JavaScript 코드를 효과적으로 관리하고 개발할 수 있습니다.