[ ES6 Script ] JS class & class 상속

기존 자바스크립트에서 객체지향 구현시 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 키워드는 내부적으로 함수처럼 동작합니다.