자바스크립트 class super

JavaScript의 클래스 상속에서 super 키워드는 자식 클래스가 부모 클래스를 참조할 수 있도록 합니다. super를 사용하면 부모 클래스의 생성자 함수를 호출하거나 부모 클래스의 메서드에 접근할 수 있습니다. 이번 글에서는 super 키워드의 역할과 사용법에 대해 자세히 알아보겠습니다.

 

super 키워드란?

 

super는 부모 클래스를 참조하는 키워드입니다. super를 사용하면 부모 클래스의 생성자 함수나 메서드를 호출할 수 있습니다. super를 사용하는 가장 대표적인 경우는 자식 클래스의 생성자 함수에서 부모 클래스의 생성자 함수를 호출하는 것입니다. 이때 super() 함수를 호출합니다. super() 함수를 호출하면 부모 클래스의 생성자 함수가 호출되어 부모 클래스에서 정의한 초기화 작업을 수행합니다. 자식 클래스의 생성자 함수에서 super() 함수를 호출하지 않으면 부모 클래스의 생성자 함수가 호출되지 않아 부모 클래스에서 정의한 초기화 작업이 수행되지 않습니다.

 

class Animal {
    constructor(name) {
    	this.name = name;
    }
}

class Dog extends Animal {
    constructor(name, breed) {
    	super(name);
    	this.breed = breed;
    }
}

const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.name); // Buddy
console.log(dog.breed); // Golden Retriever

 

위 예제에서 Dog 클래스는 Animal 클래스를 상속하고 있습니다. Dog 클래스의 생성자 함수에서 super(name)을 호출하여 Animal 클래스의 생성자 함수를 호출하고 있습니다. 이렇게 함으로써 Animal 클래스에서 정의한 name 속성을 초기화하고, Dog 클래스에서 정의한 breed 속성도 초기화하고 있습니다.

 

super 키워드는 생성자 함수 뿐만 아니라 부모 클래스의 메서드에서도 사용할 수 있습니다. 자식 클래스에서 부모 클래스의 메서드를 호출하려면 super.methodName() 형태로 호출하면 됩니다.

 

class Animal {
    constructor(name) {
    	this.name = name;
    }

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

class Dog extends Animal {
    constructor(name, breed) {
    	super(name);
    	this.breed = breed;
    }

    speak() {
    	super.speak();
    	console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); // Buddy makes a noise. Buddy barks.

 

위 예제에서 Dog 클래스에서 speak() 메서드를 오버라이딩하고 있습니다. Dog 클래스에서 speak() 메서드에서 super.speak()를 호출하여 부모 클래스인 Animal 클래스의 speak() 메서드를 호출하고 있습니다.