[javascript] 프로토타입을 활용한 상속 구현하기

07 Dec 2023

javascript

자바스크립트에서 상속을 구현하는 방법 중 하나는 프로토타입을 활용하는 것입니다. 프로토타입을 이용하면 부모 객체의 속성과 메서드를 자식 객체가 상속받을 수 있습니다. 이렇게 상속을 구현하면 코드의 재사용성을 높일 수 있고, 객체지향적인 프로그래밍을 지원할 수 있습니다.

프로토타입 체인

프로토타입 체인은 객체 간의 상속 관계를 구현하기 위해 사용되는 메커니즘입니다. 각 객체는 내부적으로 __proto__라는 속성을 가지고 있는데, 이 속성을 이용하여 객체와 그 상위 객체의 연결을 형성합니다. 이렇게 연결된 객체들의 체인을 따라 찾아가면 원하는 속성이나 메서드에 접근할 수 있습니다.

프로토타입 상속 구현하기

아래는 프로토타입을 활용하여 상속을 구현한 예시 코드입니다.

function Shape(x, y) {
  this.x = x;
  this.y = y;
}

Shape.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

function Circle(x, y, radius) {
  Shape.call(this, x, y);
  this.radius = radius;
}

Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Circle.prototype.area = function() {
  return Math.PI * Math.pow(this.radius, 2);
}

var myCircle = new Circle(0, 0, 5);
myCircle.move(1, 2);
console.log(myCircle.x, myCircle.y); // 출력: 1, 2
console.log(myCircle.area()); // 출력: 78.53981633974483

상위 객체인 Shape의 생성자와 메서드를 하위 객체인 Circle이 상속받을 수 있도록 구현하였습니다. 이를 위해 Object.create 메서드를 사용하여 Circle.prototype을 Shape.prototype의 인스턴스로 생성하고, 생성된 프로토타입의 constructor를 Circle로 설정해줍니다. 이렇게 함으로써 Circle은 Shape의 메서드인 move를 호출할 수 있게 되었습니다.

프로토타입 체인

프로토타입 상속 구현하기

참고 자료