클래스 사용법과 2가지 상속 (class, pseudoclassical)

기본 규칙

 

class는 사실 함수와 같다.

그러나 class 선언은 함수 선언과 달리 호이스팅이 일어나지 않는다.

때문에 선언되기 전에 사용하면 오류가 발생한다.

또 엄격 모드에서만 사용할 수 있다.

 

class의 내부에 선언한 함수 앞에 static을 붙이면

인스턴스를 생성하지 않고도 사용할 수 있다.

대신 인스턴스를 통해서 사용할 수는 없다.

 

class Book {
    static nextPage() {  }
}

Book.nextPage(); // 가능
const book = new Book();
book.nextPage(); // 불가능

 

인스턴스의 속성은 일반 객체와 달리 클래스 메소드 안에 정의돼야 한다.

 

 

 

상속

 

클래스를 이용한 상속은 다음과 같다.

 

class Human {
    constructor(name) { // 생성된 객체를 초기화하기 위한 메소드
        this.name = name;
    }
    sleep() {  }
}

class Student extends Human {
    constructor(name) { // 상속받는 경우 constructor 자체를 생략할 수도 있다.
        super(name); // constructor를 쓸 경우 부모 클래스의 constructor를 호출해야 한다.
    }
    learn() {  }
}

var john = new Student('john');
john.learn();
john.sleep();

 

 

다음의 코드는 위의 legacy 버전으로 동일한 기능을 한다.

 

var Human = function(name) {
    this.name = name;
}
Human.prototype.sleep = function() {
};

 

// new를 쓸 때 this가 인스턴스를 가리키고 리턴하게 되는데

// Student 인스턴스에서는 Human의 프로퍼티가 존재하지 않으므로

var Student = function(name) {
    Human.call(this, name); // Human을 호출해서 각 속성을 this에 묶어줘야 한다.

}
Student.prototype = Object.create(Human.prototype); // Student.prototype = __proto__ : Human.prototype
Student.prototype.constructor = Student; // constructor를 Human에서 Student로 바꿔줘야 한다.
Student.prototype.learn = function() {  };

var john = new Student('john');
john.learn();
john.sleep();

 

 

 

출처 : https://youtu.be/PMfcsYzj-9M

 

 

 

super는 부모가 가진 메소드를 호출할 때 사용한다.

 

class Human {
    constructor() {  }
    speak() {  }
}

class Student extends Human {
    speak() {
        super.speak(); // 부모 speak 메소드의 속성들을 가져온다.
    }
}

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

참고 : http://www.objectplayground.com/