자바스크립트는 객체 지향 프로그래밍을 지원하지만, 고전적인 클래스 기반 언어와는 다른 상속 패턴을 가지고 있습니다. 이번 글에서는 생성자 함수와 프로토타입을 이용한 자바스크립트의 상속 패턴의 변천사에 대해 알아보겠습니다.
1. 생성자 함수와 프로토타입 기반 상속 패턴
자바스크립트에서는 생성자 함수와 프로토타입을 이용하여 상속을 구현할 수 있습니다. 생성자 함수는 객체를 생성하는 역할을 하며, 해당 객체의 프로퍼티와 메서드를 정의할 수 있습니다. 프로토타입은 생성자 함수로 부터 생성된 객체들이 공유하는 프로퍼티와 메서드를 정의하는 객체입니다. 생성자 함수를 이용하여 객체를 생성하고, 프로토타입을 이용하여 상속을 구현하는 것이 전통적인 자바스크립트 상속 패턴입니다.
function Animal(name) {
this.name = name;
}
Animal.prototype.walk = function() {
console.log(this.name + " is walking.");
}
function Cat(name) {
Animal.call(this, name);
}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.meow = function() {
console.log(this.name + " is meowing.");
}
var cat = new Cat("Tom");
cat.walk(); // Tom is walking
cat.meow(); // Tom is meowing
위의 예시에서 Animal 생성자 함수는 name 프로퍼티와 walk 메서드를 가지고 있습니다. Cat 생성자 함수는 Animal 생성자 함수를 호출하면서 상속을 구현하고, meow 메서드를 추가로 정의하였습니다. Cat.prototype은 Animal.prototype을 상속받아서 프로토타입 체인을 구성하고, constructor 프로퍼티를 수정하여 Cat을 가리키도록 설정합니다.
이러한 생성자 함수와 프로토타입을 이용한 상속 패턴은 자바스크립트에서 오랫동안 사용되어 왔습니다. 그러나 상속 체인이 길어질수록 코드의 가독성과 유지보수의 어려움이 발생하는 단점이 있습니다. 또한, 프로토타입 체인 때문에 메서드를 찾는 과정이 복잡해져 성능에도 영향을 미칠 수 있습니다.
2. 클래스 기반 상속 패턴
ECMAScript 6(ES6)부터는 클래스(class)와 extends 키워드를 이용하여 보다 간편하게 상속을 구현할 수 있게 되었습니다. 클래스 기반 상속 패턴은 기존의 생성자 함수와 프로토타입을 이용한 상속 패턴을 보완하고, 개발자들이 더욱 쉽게 상속을 구현할 수 있도록 도와줍니다.
class Animal {
constructor(name) {
this.name = name;
}
walk() {
console.log(this.name + " is walking.");
}
}
class Cat extends Animal {
constructor(name) {
super(name);
}
meow() {
console.log(this.name + " is meowing.");
}
}
const cat = new Cat("Tom");
cat.walk(); // Tom is walking
cat.meow(); // Tom is meowing
위의 예시에서 Animal 클래스는 name 프로퍼티와 walk 메서드를 가지고 있습니다. Cat 클래스는 Animal 클래스를 상속받으면서 meow 메서드를 추가로 정의하였습니다. super 키워드를 이용하여 부모의 생성자 함수를 호출할 수 있으며, extends 키워드를 이용하여 상속을 구현합니다.
클래스 기반 상속 패턴은 상속이 간편해지고 코드의 가독성이 향상되는 장점이 있습니다. 또한, 클래스는 제대로된 상속 구문을 제공하여 상속 관계를 명확히 표현할 수 있습니다. 그러나 클래스 기반 상속 패턴은 ES6 이상에서만 사용할 수 있기 때문에, 호환성 문제가 있을 수 있습니다.