JS 상속 기능을 사용하는 이유

자바스크립트에서 상속 기능을 사용하는 이유 

 

1. 코드 재사용성(Code Reusability)

상속을 통해 부모 클래스의 속성과 메서드를 자식 클래스에서 재사용할 수 있다.

이것은 코드를 더 간결하게 만들고 중복을 피할 수 있도록 해준다.

// 부모 클래스
function Animal(name) {
  this.name = name;
}

// 공통 메서드 추가
Animal.prototype.eat = function() {
  console.log(this.name + "가 먹고 있습니다.");
};

// 자식 클래스
function Dog(name, breed) {
  Animal.call(this, name); // 부모 클래스의 생성자 호출
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);

// 자식 클래스에서 부모 클래스의 메서드 재사용
Dog.prototype.bark = function() {
  console.log("멍멍!");
};

var myDog = new Dog("Buddy", "골든 리트리버");

// Animal 클래스의 메서드 호출
myDog.eat();  // "Buddy가 먹고 있습니다."
myDog.bark(); // "멍멍!"

 

2. 유지보수성 향상(Maintenance)

상속을 사용하면 코드의 일부를 변경하거나 업데이트할 때 관련된 모든 클래스를 수정할 필요가 없다.

부모 클래스에서 변경하면 해당 변경 사항이 모든 자식 클래스에서 자동 반영된다.

// 부모 클래스
function Shape(color) {
  this.color = color;
}

// 부모 클래스의 메서드
Shape.prototype.getColor = function() {
  return this.color.toUpperCase();
};

// 자식 클래스
function Circle(radius, color) {
  // 상속 및 부모 클래스 생성자 호출
  Shape.call(this, color);
  this.radius = radius;
}

// Circle이 Shape을 상속하도록 프로토타입 설정
Circle.prototype = Object.create(Shape.prototype);
// Circle의 생성자를 다시 지정
Circle.prototype.constructor = Circle;

// 자식 클래스의 메서드 추가
Circle.prototype.getArea = function() {
  return Math.PI * this.radius * this.radius;
};

// 사용 예제
var myCircle = new Circle(5, "red");

console.log(myCircle.getColor());  // "RED" (부모 클래스의 메서드 사용)
console.log(myCircle.getArea());   // 78.54 (자식 클래스의 메서드 사용)

 

3. 다형성 지원(Polymorphism)

긱가 다른 클래스에서 다르게 동작한다.

// 부모 클래스
function Vehicle() {}

// 부모 클래스의 메서드
Vehicle.prototype.drive = function() {
  console.log("Generic vehicle is driving.");
};

// 자식 클래스 1
function Car() {}
Car.prototype = Object.create(Vehicle.prototype);

// 자식 클래스 1의 메서드 재정의 (다형성)
Car.prototype.drive = function() {
  console.log("Car is driving fast!");
};

// 자식 클래스 2
function Bicycle() {}
Bicycle.prototype = Object.create(Vehicle.prototype);

// 자식 클래스 2의 메서드 재정의 (다형성)
Bicycle.prototype.drive = function() {
  console.log("Bicycle is pedaling.");
};

// 다형성 활용 함수
function goDriving(vehicle) {
  vehicle.drive();
}

// 다형성을 이용한 호출
var myCar = new Car();
var myBicycle = new Bicycle();

goDriving(myCar);      // "Car is driving fast!"
goDriving(myBicycle);  // "Bicycle is pedaling."