자바스크립트는 프로토타입 기반의 객체 지향 언어로, 상속을 구현하는 다른 언어와 다른 방식을 이용합니다. 이번 블로그 포스트에서는 자바스크립트 변수의 상속을 구현하는 방법에 대해 알아보겠습니다.
프로토타입 상속
자바스크립트에서 변수의 상속은 주로 프로토타입 체인을 통해 구현됩니다.
프로토타입 체인은 객체와 객체 간의 상속 관계를 나타내는 메커니즘입니다. 각 객체는 prototype이라는 속성을 가지고 있으며, 이를 통해 다른 객체로부터 속성과 메소드를 상속받을 수 있습니다.
// 부모 객체
const parent = {
name: "John",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
// 자식 객체
const child = Object.create(parent);
// 자식 객체에서 부모 객체의 속성 및 메소드 사용
console.log(child.name); // "John"
console.log(child.age); // 30
child.greet(); // "Hello, my name is John"
자식 객체는 Object.create() 메소드를 사용하여 부모 객체를 상속받게 됩니다. 이후 자식 객체에서 부모 객체의 속성 및 메소드를 사용할 수 있습니다.
속성 오버라이딩
프로토타입 상속을 통해 상속받은 속성은 자식 객체에서 수정 및 재정의할 수 있습니다. 이를 속성 오버라이딩이라고 합니다.
// 부모 객체
const parent = {
name: "John",
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
// 자식 객체
const child = Object.create(parent);
// 속성 오버라이딩
child.name = "Alice"; // name 속성 오버라이딩
child.greet(); // "Hello, my name is Alice"
자식 객체에서 name 속성을 오버라이딩하여 값을 변경할 수 있습니다. 이후 자식 객체에서 greet() 메소드를 호출하면 변경된 값이 출력됩니다.
생성자 함수와 상속
자바스크립트에서는 생성자 함수를 사용하여 객체를 생성할 수 있습니다. 생성자 함수를 이용하여 객체를 생성하는 경우, 프로토타입 상속 또한 함께 구현할 수 있습니다.
// 부모 생성자 함수
function Parent(name) {
this.name = name;
}
Parent.prototype.greet = function() {
console.log(`Hello, my name is ${this.name}`);
}
// 자식 생성자 함수
function Child(name, age) {
Parent.call(this, name); // 부모 생성자 함수 호출
this.age = age;
}
Child.prototype = Object.create(Parent.prototype); // 프로토타입 상속
Child.prototype.constructor = Child; // 생성자 함수 설정
// 객체 생성
const child = new Child("Alice", 25);
console.log(child.name); // "Alice"
console.log(child.age); // 25
child.greet(); // "Hello, my name is Alice"
위의 예시에서 Parent 생성자 함수와 Child 생성자 함수를 만들어 프로토타입 상속을 구현했습니다. Child 생성자 함수 내부에서 Parent.call(this, name)을 호출하여 부모의 생성자 함수를 실행한 후, Object.create(Parent.prototype)을 통해 프로토타입 상속을 설정합니다.
이후 자식 객체를 생성하여 상속된 속성과 메소드를 사용할 수 있습니다.
결론
자바스크립트에서 변수의 상속은 프로토타입 체인을 통해 구현됩니다. 프로토타입 상속을 이용하여 객체 간의 상속 관계를 생성하고 속성과 메소드를 상속받을 수 있습니다. 또한 속성 오버라이딩을 통해 상속받은 속성을 수정하거나 재정의할 수 있습니다. 생성자 함수를 사용하여 객체를 생성하는 경우에도 프로토타입 상속을 함께 구현할 수 있습니다.
자바스크립트의 프로토타입 기반의 상속은 다른 언어와는 조금 다른 개념이므로 개발자들은 이를 잘 이해하고 활용할 수 있어야 합니다.