자바스크립트에서의 다형성

다형성은 하나의 메소드나 함수가 여러 객체에 대해 다른 동작을 수행하는 능력을 의미하며 선언부분과 구현부분으로 나눠 구성된다.

 

자바를 예로 다형성을 살펴보자

// 인터페이스 선언
interface Animal {
    void speak();
}

// Dog 클래스는 Animal 인터페이스를 구현함
class Dog implements Animal {
    public void speak() {
        System.out.println("Dog barks.");
    }
}

// Cat 클래스도 Animal 인터페이스를 구현함
class Cat implements Animal {
    public void speak() {
        System.out.println("Cat meows.");
    }
}

public class Main {
    // Animal 인터페이스를 매개변수로 받는 메소드
    static void makeSound(Animal animal) {
        animal.speak();
    }
    
    public static void main(String[] args) {
        Animal dog = new Dog();
        Animal cat = new Cat();
        
        // 다형성을 통해 makeSound 메소드가 각 객체에 따라 다르게 호출됨
        makeSound(dog); // 출력: Dog barks.
        makeSound(cat); // 출력: Cat meows.
    }
}

 

위와 같이 일반 객체지향 프로그래밍에서는 다형성을 선언부분과 구현부분을 완전히 분리해서 구현할 수 있다.

 

하지만 자바스크립트에서는 명시적으로 다형성과 관련된 문법일 지원하지 않는다.

문법은 지원하지 않아도 다형성을 사용할 수는 있다.

 

ES6 이전버전 프로토타입 방식

//부모 생성자 함수
function Animal(name){
    this.name = name;
}

//부모 메소드
Animal.prototype.speak = function(){
    console.log(this.name + 'makes a sound');
}; // 정의 하지 않아도 자식 객체에서 오버라이딩해서 사용할 수 있다.

//자식 생성자 함수- Dog
function Dog(name) {
    Animal.call(this, name); // 부모 생성자 호출
}

function Cat(name) {
    Animal.call(this, name); // 부모 생성자 호출
}

//자식의 프로토타입을 부모의 인스턴스로 설정
Dog.prototype = Object.create(Animal.prototype);//Animal.prototype을 상속받는 새로운 객체를 만듬
Dog.prototype.constructor = Dog; //생성자 함수를 Dog 생성자 함수로 재설정

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

//자식 메소드 오버라이딩
Dog.prototype.speak = function(){
    console.log(this.name + ' 멍멍');
};

Cat.prototype.speak = function(){
    console.log(this.name + ' 야옹');
};

var dog = new Dog('돌돌이');
var cat = new Cat('냥이');

dog.speak(); // 출력: 돌돌이 멍멍
cat.speak(); // 출력: 냥이 야옹

 

 

ES6 이후 클래스 방식

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

//자식 클래스
class Dog extends Animal{
    speak(){
        console.log(`${this.name} 멍멍`)
    }
}

class Cat extends Animal{
    speak(){
        console.log(`${this.name} 야옹`)
    }
}

var dog = new Dog('돌돌이');
var cat = new Cat('냥이');

dog.speak(); // 출력: 돌돌이 멍멍
cat.speak(); // 출력: 냥이 야옹

 

ES6 이후의 JavaScript에서는 클래스를 사용하여 상속을 구현하고, 필요에 따라 메소드를 오버라이딩하여 다형성을 구현할 수 있다.