[ JavaScript ] ES6 : class & class 의 상속(extends)

기존 자바스크립트에서 객체지향 구현시 function 이 생성자였다.

 

function 으로 하다보니 표현력이 떨어지고, 코드가 점점 복잡해졌다.

 

 

그래서 ES6 에서는 class 키워드가 나타났다.

 

 

 

1. class

 

 

class Study{
	constructor(name){
    	this.name = name;
    }
	getName(){
    	return this.name;
    }
}
let study = new Study("철보빡");
console.log("study.getName();" + study.getName());

 

 

 

 

class 키워드를 이용해서 클래스를 정의하고 Study 클래스를 선언했다.

 

 

생성자 함수는 constructor 라는 이름으로 정의되어있는데,

 

이는 클래스가 생성될때 기본적으로 호출되는 함수이다.

 

 

 

클래스는 new 키워드로 객체를 만들어 사용한다.

 

객체를 생성할 때 전달한 인자인 "철보빡" 은 생성자의 파라미터로 전달되어

 

name 을 초기화 시켰다.

 

 

 

 

이에 따라 getName 메소드를 이용해 name 을 출력시켰다.

 

 

 

 

 

2. class extends

 

 

다른 객체 지향 언어들과 마찬가지로 extends 키워드를 이용하여 클래스를 상속받을 수 있다.

 

 

class Study{
	constructor(name){
    	this.name = name;
    }
	getName(){
    	return this.name;
    }
}
let study = new Study("철보빡");
console.log("study.getName();" + study.getName());

class Coding extends Study{
	constructor(name){
    	super(name);
    }
}
let subject = new Coding('coding');
console.log("subject instanceof Coding : "+ (subject instanceof Coding));
console.log("subject instanceof Study : "+ (subject instanceof Study));
console.log("subject.getName() : "+ subject.getName());

 

 

 

 

 

자바스크립트에서 자식 클래스를 초기화 하려면

 

먼저 부모 클래스의 생성자를 호출해야하므로

 

 

자식클래스의 생성자에 super 메소드를 사용해 부모 클래스의 생성자를 호출해야한다.

 

 

위의 예시에서 알 수 있는 것은,

 

subject 가 Coding 의 instance 이면서 Coding 이 Study 의 자식이므로

 

subject 가 Study 의 자식인지에 대한 여부에서 true 가 나온 것이다.

 

 

그렇기 때문에 getName 이라는 메소드를 사용할 수 있었던 것을 알 수 있다.

 

 

 

 

 

결론적으로, class 키워드는 내부적으로 함수처럼 동작한다.

ES6 에서는 객체지향에서 중요한 개념인 클래스와 상속을 정립했다.