[ECMAScript6] Class 클래스

ECMAScript 6가 나왔네요. 테스트해보니 크롬이랑 파이어폭스에서 잘 동작하네요.(최신버전)

새로 나온 feature 에 대해서 공부도 할겸 하나씩 정리해볼 생각입니다.

참고사이트 :

http://es6-features.org/

https://github.com/lukehoban/es6features

Class (클래스)

자바스크립트에서도 클래스를 본격적으로 사용할 수 있습니다. 객체지향 패턴을 쉽게 구현해보시죠.

클래스는 프로토타입 기반의 상속, 상위클래스 호출(super), 인스턴스, static method와 constructor를 지원합니다.

요거는 JAVA에 대해 빠삭한 분들이면 별 어려움 없이 사용하실 수 있겠네요!

 
var Animal = class Animal {
    constructor() {
        this.name = '구피';
        this.sound = '멍멍';
    }
    
    eat(){
        console.log('냠냠쩝쩝');
    }
 
    staic sleep(){ //static method
        console.log('쿨쿨..');
    }
    
    bark(){
        console.log(this.sound + '하고 짖어라.');
    }
    
}
 
var Dog = class Dog extends Animal {
    constructor() {
        super();
        this.sound = '왈왈';
    }
}
 
var Lion = class Lion extends Animal {
    constructor() {
        super();
        this.name = '심바';
        this.sound = '어흥';
    }
    
    hunt() {
        console.log('사냥하러 갑니다.');
    }
}
 
var Goofy = new Dog();
Goofy.name; // 구피
Goofy.sound; // 왈왈
Goofy.bark(); // 왈왈하고 짖어라.
Goofy.hunt(); //error
 
var Simba = new Lion();
Simaba.name; // 심바
Simaba.sound; // 어흥
Simaba.bark(); // 어흥하고 짖어라.
Simba.hunt(); // 사냥하러 갑니다..
 

Animal 클래스를 만들고 Dog와 Lion이 상속받아 구현했습니다. name과 sound를 할당할 수 있고 bark()를 통해 sound 소리를 냅니다.

hunt()는 사자의 고유 행동이라 Lion에만 구현했습니다. (구피는 애완견이니까ㅋㅋㅋ)

sleep()는 static method 입니다. (하단 설명 참조)

• class 키워드로 선언합니다. 클래스 선언은 호이스팅(hoisting)을 지원하지 않습니다! 사용하기 전에 먼저 선언해주세요.
• constuctor 
• class로 생성된 객체를 생성하고 초기화하기 위한 특수 메소드입니다. 
• 하나의 클래스에 하나씩만 가질 수 있습니다. 하나 이상이면 SyntaxError 발생.
• 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용할 수 있습니다.
• super : 파생 클래스에서 this를 사용하기 전에는 반드시 super()를 호출해야 합니다. 그렇지 않을 경우 참조 에러 발생.
• static method
• 메소드 앞에 static을 정의하면 인스턴스화 없이 호출할 수 있습니다. (ex) Animal.sleep();
• 만약 클래스가 인스턴스화 되었다면 부를 수 없어요.... (ex) Dog.sleep() // 안됨.