프로토타입 체인
자바스크립트에서 프로토타입은 객체의 부모 역할을 하는 객체라고 설명했다. 모든 객체는 자신의 프로토타입을 가리키는 내부 링크인 __proto__를 가지고 있으며, 프로토 타입 체인을 통해 상위 프로토타입으로 부터 속성과 메서드를 상속받을 수 있다.
메서드 오버라이드
메서드 오버라이드는 상속받은 메서드를 자식 객체에서 재정의하여 사용하는 것을 말한다. 부모 객체에서 정의된 메서드를 자식 객체에서 동일한 이름의 메서드로 다시 정의하면, 자식 객체에서는 오버라이드된 메서드가 호출되어 실행된다.
// 부모 객체 정의
function Animal(name) {
this.name = name;
}
// 부모 객체의 sayHello 메서드
Animal.prototype.sayHello = function() {
console.log(`Hello, I'm ${this.name}`);
};
// 자식 객체 정의
function Cat(name) {
Animal.call(this, name);
}
// Cat 객체의 프로토타입 설정
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
// Cat 객체에서 sayHello 메서드 오버라이드
Cat.prototype.sayHello = function() {
console.log(`Meow, I'm ${this.name}`);
};
// 객체 생성 및 메서드 호출
const animal = new Animal('Animal');
const cat = new Cat('Cat');
animal.sayHello(); // Hello, I'm Animal
cat.sayHello(); // Meow, I'm Cat
위의 예시에서 Animal 객체는 sayHello 메서드를 가지고 있다. 이 메서드는 부모 객체에서 정의 되었고, Animal 객체와 Cat 객체에서 모두 사용할 수 있다. 이후에 Cat 객체에서 sayHello 메서드를 오버라이드 하여서 다르게 출력하도록 재정의하였다. Cat.prototype을 Animal.prototype의 인스턴스로 설정함으로 Cat 객체는 Animal 객체의 메서드를 상속받을 수 있게 되었고 Cat.prototype 에서 sayHello 메서드를 오버라이드하여 자식 객체에서 변경할 수 있다.
결과적으로 animal.sayHello()는 부모 객체의 sayHello 메서드를 호출하여 "Hello, I'm Animal"을 출력, cat.sayHello()는 자식 객체인 Cat의 오버라이드된 sayHello를 호출하여 "Meow, I'm Cat"을 출력한다. 즉 메서드 위에 메서드를 덮어씌우게 되는 것이다. 원본을 제거하고 다른 대상으로 교체되는 것이 아닌 원본이 그대로 있는 상태에서 다른 대상을 그 위에 얹는 것이다.
자바스크립트 엔진이 메서드를 찾는 방식을 보면 가장 가까운 대상인 자신의 프로퍼티를 검색하고, 없으면 그 다음으로 가까운 대상인 __proto__ 를 검색하는 순서로 이루어지기 때문에 덮어씌워진 메서드를 먼저 찾게된다.
prototype의 메서드 오버라이드를 사용하면 상속 구조에서 부모 객체의 동작을 자식 객체에서 수정하거나 확장할 수 있다. 이를 통해 코드의 재사용성과 유지보수성을 높일 수가 있다.
