[자바스크립트 객체지향]classes 생성,생성자로써 활용,상속, super

자바스크립트의 class는 es6버전에서 사용할 수 있는 문법이다.

하지만 바벨을 통해 컴파일해서 es6를 지원하지 않는 브라우저에서도

동작하게 할 수 있으므로 걱정하지 않아도 된다고 한다.

 

1. class의 생성

class Person{
            constructor(name, first, second){ 
                this.name = name;
                this.first = first;
                this.second = second;}
            }

Person 이라는 class 를 생성하였다.

내부의 constructor 는 객체가 만들어짐과 동시에 실행되는 함수이다.

즉 일반 생성자함수와 동일하게 초기값을 세팅할 수 있게 해준다.

 

2. class 에서의 method

        class Person{
            constructor(name, first, second){ 
                this.name = name;
                this.first = first;
                this.second = second;
            }
            sum(){
                return this.first+this.second;
            }
        }

class 내부에서 일반 생성자 함수와는 다르게 function 을 적지 않고 바로 이름을 적어서

생성할 수 있다. 호출방법은 그대로 .sum() 으로 사용하면 된당.

 

3. 상속

class PersonPlus{
        constructor(name, first, second){ 
               this.name = name;
               this.first = first;
               this.second = second;
               }
        sum(){
            return this.first+this.second;
            }
        avg(){
            return (kim.sum())/2;
            }
  }

상속이라는것을 모르는체로 할 일을 추가하고 싶을때는 위와같이 작성하면 된다.

class 를 다시 정의하고 Person 함수와 동일한 코드를 쭉 적어준 후 밑에 새로운

할 일을 적어주면 되지만, 이때 중복이 발생하게 된다.(Person 을 삭제하거나 추가하기 곤란한 상황에서)

이럴때 상속을 사용하면 되는데,

 

class PersonPlus extends Person{
            avg(){
                return (kim.sum())/2;
            }
        }

위와같이 적어주면 된다. PersonPlus를 extends 를 통해 확장시킨다는 건데,

이렇게 되면 Person의 모든 요소들이 PersonPlus에 상속된다고 보면 된다.

넘나 깔끔한것.

 

4. super

위의 코드를 보면 인자 3개를 받고 있다. name, first, second.

그런데 만약 부모클래스인 Person을 건들이면 안되면서,  third 라는 인자를 하나 더 받고싶을땐

어떻게 해야할까, 아래와 같은 방법이 있다.

class Person{
            constructor(name, first, second){ 
                this.name = name;
                this.first = first;
                this.second = second;
            }
            sum(){
                return this.first+this.second;
            }
        }
class PersonPlus extends Person{
    constructor(name, first, second, third){ 
                this.name = name;
                this.first = first;
                this.second = second;
                this.third = third;
            }
            sum(){
                return this.first+this.second+this.third;
            }
            avg(){
                 return (this.first+this.second)/2;
            }
}

하지만 이렇게 되면 상속을 쓴 의미가 전혀 없게 된다. 중복이 그대로 또 생기기 때문이다.

이때 쓸 수 있는것이 super 이다.

class Person{
            constructor(name, first, second){ 
                this.name = name;
                this.first = first;
                this.second = second;
            }
            sum(){
                return this.first+this.second;
            }
        }
class PersonPlus extends Person{
    constructor(name, first, second, third){ 
                super(name, first, second); //super() = 부모클래스의 생성자 constructor를 호출한다.
                this.third = third;
            }
            sum(){
                return super.sum()+this.third; //super.sum() = 부모클래스의 메소드인 sum을 호출하고 리턴함.
            }
            avg(){
                 return (super.sum()+this.third)/3;
            }
}

이렇게 super 을 사용하여 부모에 있는 것들을 그대로 가져와서 쓸 수 있다.

super() 의 경우에는 부모클래스의 생성자 constructor를 호출하는 용도로 쓰이고

super.sum() 은 부모클래스의 메소드인 sum을 호출한다는 의미이다.

이렇게되면 부모클래스인 Person은 건들지 않으면서 추가적인 작업을 가능하게 해준다.

        var kim = new PersonPlus('kim', 10, 20, 30);
        console.log(kim.sum()) //60
        console.log(kim.avg()) //20

이렇게 실행해보면 정상적으로 출력되는걸 볼 수 있다.