자바스크립트 클래스 (필드, 상속, 오버라이딩)

HyosikPark·2020년 10월 21일
1

Javascript

목록 보기
15/26

class

클래스는 함수이며 항상 엄격모드로 실행이된다.

class User {
	constructor(name) {
    this.name = name
    }
  
  method() {}
}

let user = new User('John');

constructor는 생성자이고, 메소드들은 class.prototype에 저장된다.

class field

클래스 필드는 클래스에 프로퍼티를 추가할 수 있는 문법이다.

class User {
name = 'John'

method = () => {//this사용}
}

위와 같이 프로퍼티를 직접추가할 수 있으며 정적 메소드와는 다르다.
호출할때에 인스턴스를 통해 호출할 수 있기 때문이다. (new User().name)
클래스필드는 프로토타입에 저장되는 것이 아닌 개별 인스턴스에 저장된다.
클래스필드에 람다식을 사용하면 method의 this를 개별 인스턴스에 고정시킬 수 있다. 클래스필드는 인스턴스를 생성할 때마다 개별인스턴스에 저장되기 때문에 프로퍼티 또는 인스턴스가 많을 경우 부담스러울 수 있다. 따라서 메소드를 람다식으로 표현할 때에는 한번 더 생각을 해보는 것이 좋다.(메소드는 class prototype에 저장됨)

class 상속

class User {}

class Me extends User {}

Me class가 User class를 상속받는다. User.prototype이 Me.prototype의 
__proto__가 되기 때문에 User의 메소드는 프로토타입으로 재활용하고,
필드는 자식 인스턴스에 그대로 물려준다.

부모와 자신 필드 값의 key가 겹칠 경우 자신의 필드 값을 사용한다.

class 오버라이딩

class 오버라이딩은 부모 class에서 정의한 생성자나 메소드를 자식 class에서 재 정의하여 사용하는 것이다.

메소드 오버라이딩

class User {
	method() {// ...}
}

class Me extends User {
	method() {// ...
    	// super.method()
    }
}

위와 같이 자식클래스에서 부모 클래스 메소드명을 사용하여 자식 클래스 인스턴스에서 호출하게 되면 자식 클래스의 메소드를 사용하게 된다.
하지만 부모클래스의 메소드도 사용하고 싶을 경우가 있기 때문에 super.method()를 호출하여 부모 메소드를 사용할 수 있다. 참고로 super.method()는 메소드 내에서만 사용 가능한 기능이다. 메소드 문법도 method() {super.method()} 형태가 꼭 지켜져야 한다.

생성자 오버라이딩

class User {
		constructor(name, age) {
        this.name = name;
        this.age = age;
        }
}

class Me extends User {
  		constructor(name, height) {
          super(name);
          this.height = height;
    }
}

new Me('john',240)

자식 클래스에 생성자를 만들어주지 않은 경우에는(constructor()가 없는 경우) 부모 생성자를 그대로 활용할 수 있다. 하지만 자식 생성자를 따로 사용하고 싶을 경우 필히 super(arg1,arg2, ...);를 먼저 호출한 뒤에 사용해야한다. super의 인자 순서는 부모 constructor의 인자 순서이다.

참고

https://ko.javascript.info/

0개의 댓글