자바스크립트 class 클래스, extends 상속, super 슈퍼 사용하기

Class는 객체를 생성하기 위한 템플릿이다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 한다.

자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다고 한다.

 

Class 특별한 함수이다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공한다.

 

1. Class 선언식

class Ruler {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

함수 선언과 클래스 선언의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다. 다음 코드는 ReferenceError를 던진다.

//에러발생
const p = new Ruler(); // ReferenceError
class Ruler {}


//정상
class Ruler {}
const p = new Ruler(); // Success
console.log(p);
// Ruler {}

ReferenceError란 객체는 현재 범위에서 존재하지 않거나 초기화되지 않은 변수를 참조했을 때 발생하는 에러를 나타낸다.

예외가 발생하는 이유는 class가 호이스팅될 때 초기화는 되지 않기 때문이다.

 

2. Class 표현식

Class 표현식은 class를 정의하는 또 다른 방법이다. Class 표현식은 이름을 가질 수도 있고, 갖지 않을 수도 있다.

이름을 가진 class 표현식의 이름은 클래스 body의 local scope에 한해 유효하다. (하지만, 클래스의 (인스턴스 이름이 아닌) name 속성을 통해 찾을 수 있다고 한다.)

// unnamed
let Ruler = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Ruler.name);
// 출력: "Ruler"

// named
let Ruler = class Ruler2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Ruler.name);
// 출력: "Ruler2"

 

3. Class 초기값 설정

Constructor(생성자)를 이용하면 class 객체의 초기 값을 설정해 줄 수 있다. class 내부에서 Constructor는 한 개만 존재할 수 있으며, 2번 이상 사용 시 Syntax Error가 발생할 수 있다. Constructor를 이용하여 Ruler 클래스에 초기 값을 설정해보자.

class Ruler {
    constructor (height,width) {
        console.log('construtor');
        this.height = height;
        this.width = width;
    }
}

let print = new Ruler(200,100);

console.log(print);
//결과 
//constructor
//Ruler {height: 200, width : 100}

Constructor는 새로운 클래스를 생성할 때 가장 처음 실행되면서 초기값을 설정해준다.

 

4. Class  메서드 사용

class에서 설정한 초기값을 접근해 특정 기능을 하는 메서드를 만드는 것도 가능하다. 간단한 메서드를 하나 만들어보자. class안에 function 형식으로 만들어준 뒤 해당 메서드를 호출하기만 하면 된다. 현재 높이서 100을 더하는 메서드를 class안에 정의한 뒤 호출하자.

class Ruler {
    //생성자
    constructor (height,width) {
        this.height = height;
        this.width = width;
    }
    //메서드생성
    addHeight() {
        return Number(this.height) + 100;
    }
}

let print = new Ruler(200,100);

console.log(print.addHeight());
//결과 300

class는 javascript 상 객체의 형태이므로 생성된 class 객체에 class 밖에서 새로운 메서드를 넣는 것도 가능하다.

class Ruler {
    //생성자
    constructor (height,width) {
        this.height = height;
        this.width = width;
    }
    //메서드생성
    addHeight() {
        return Number(this.height) + 100;
    }
}

let print = new Ruler(200,100);

//신규 메서드 추가
print.model = function () {
    return 'dewalt'
}

console.log(print.addHeight());
//결과 300
console.log(print.model());
// dewalt


let print2 = new Ruler(200,100);
console.log(print2.addHeight());
//결과 300
console.log(print2.model());
//결과 TypeError: print2.model is not a function 오류 발생

 

하지만 밖에서 추가한 class는 추후 새로운 new Ruler class로 새로운 객체를 만들었을 때는

호출하여 사용할 수 없다. TypeError: print2.model is not a function 발생

실제 class안에 메서드가 없기 때문에..

 

5. 상속(extends)

class에서 상속 개념을 이용할 수 있다. css를 이용한 분들이라면 하나의 속성이 하위 속성에도 같이 적용되는 것처럼

class에서도 상속을 이용하면 기존의 class의 값을 모두 접근하여 사용할 수 있다.

상속은 extends를 써서 이용할 수 있다.

다음 예제를 통해서 Protractor클래스에서 Ruler을 상속받았기 때문에

this.height와 this.width 모두 사용할 수 있는 것을 확인할 수 있다.

//자 클래스
class Ruler {
    //생성자
    constructor (height,width) {
        this.height = height;
        this.width = width;
    }
    //메서드생성
    addHeight() {
        return Number(this.height) + 100;
    }
}
//각도기 클래스
class Protractor extends Ruler {
    //메세지를 리턴하는 메서드
    message () {
        return `이 물건의 사이즈는 높이 ${this.height} 넓이 ${this.width} 입니다.`
    }

}

let print = new Protractor(200,100);

console.log(print.message())
//결과 이 물건의 사이즈는 높이 200 넓이 100 입니다.

 

 

6. super 사용하기

Protractor 하위 클래스에서 기존 class의 값을 가져다 쓰는 건 좋았지만, 추가적으로 Protractor이라는 하위 클래스에서만 사용하고 싶은 값이 있을 수도 있다. 이때 이용하는 것은 super라는 키워드이며 이는 객체의 부모가 가지고 있는 메서드를 호출할 수 있다. 자식 쪽의 추가적으로 사용할  초기값이 필요할 경우 constructor에 super로 부모 초기값을 세팅한 뒤 자식 class에서만 사용할 초기값을 따로 지정하는 것도 가능하며 super 기능을 이용해서 자식 class에서 부모 메서드를 호출할 수도 있다.

 

// 줄자 크래스
class Ruler {
    //생성자
    constructor (height,width) {
        this.height = height;
        this.width = width;
    }
    //메서드생성
    addHeight() {
        return Number(this.height) + 100;
    }
}
//각도기 클래스
class Protractor extends Ruler {

    constructor(height, width, angle) {
        super(height, width);
        this.angle = angle
    }
    
    message () {
        return `이 물건의 사이즈는 높이 ${this.height}cm 넓이 ${this.width}cm 입니다. 
            더한 높이는 ${super.addHeight()}cm 이며,
            각도는 ${this.angle}도 입니다.`
    }

}

let print = new Protractor(200,100,90);

console.log(print.message())
//결과 이 물건의 사이즈는 높이 200cm 넓이 100cm 입니다. 더한 높이는 300cm 이며, 각도는 90도 입니다.

java class와 extends 처럼 규칙성을 갖는 객체를 일관성 있게 만들고 상속을 통해 확장할 수 있다.

 

 

 

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes#class_%ED%91%9C%ED%98%84%EC%8B%9D

https://ordinary-code.tistory.com/22

opentutorials.org/module/4047/24614

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes