<JS es6> es6 class +) class 상속

* es6 class / 상속 *

 

 

 

 

1. ES6 class

 

 

ES5 이전 버전 : 객체지향프로그래밍을 그럴듯하게 표현하기 위해 함수를 클래스처럼 사용한 것.

원래 js 에는 클래스 개념이 없다.

 

1. 리터널클래스 ( 객체. 자체로 인스턴스) 객체지향프로그래밍에 맞지 않다. 상속x

2. 함수방식 클래스 ( 함수, new로 인스턴스화) 객체지향 프로그래밍에 맞지 않다. 상속x

3. 프로토타입 방식 클래스 (함수, new로 인스턴스화, .prototype으로 변수, 메소드 생성) 상속 o

-> 객체지향프로그래밍에 맞다

 

 

4. ES6 (ECMA script2015)(==프로토타입클래스) : 상속 o  

 

 

 

 

 

 

class 클래스명 {

constructor(매개변수){

...

}

 

...

 

}

 

으로 구성된다.  

 

constructor는 new연산자로 인스턴스화할때 ( 객체로 리턴할 때 ) 실행되는 부분. 매개변수 사용 가능하다.

 

 

 

 

 

2) 인스턴스화하기.

constructor 실행됨.

 

 

 

 

 

 

 

 

 

 

3) 멤버변수, 함수 실행하기.

 

 

 

 

 

 

 

 

2. 상속  : 갖고있는 데이터를 가져오는 것.

 

 

class 클래스명 extends 상속받을 클래스명 {

...

}

 

 

1) 클래스 만들기

 

 

 

2) 인스턴스화

 

: constructor 실행

 

 

 

이렇게 바꿨을 때

 

 

 

 

 

3) 멤버변수, 메소드실행 출력