[자바스크립트 중급] class 클래스, extends, super, overriding

0. 들어가며

- 동일 포멧의 여러 객체를 만드는 방법은 "생성자함수"만 있는 것이 아니다.

- class, extends , super 키워드를 이용하면 '몸통' 만들어 놓고 필요에 따라 '팔', '다리' 붙여서 객체 생성하기 좋다.

 

1. class : 동일 포멧의 객체를 생성한다. (찍어낼 수 있다)

- ES6에 새로 추가된 스펙이다.

- 함수가 아닌 프로퍼티들을 '속성 : field 필드' 라고 하며 동작을 나타내는 함수는 '메소드'라 한다.

- constructor는 생성자라고 한다.

- 메소드(객체 내부에 선언된 함수)는 프로토타입으로 저장된다. (생성자함수로는 그냥 객체에 저장)

- 생성자함수와 동일하게 new 로 생성하지만 new가 빠져도 에러 없이 undefined를 반환하는 생성자함수와 달리 new를 빼고 생성하면 타입에러가 뜬다.

- 프로토타입에 constructor에 Class로 생성된 객체인 것이 명시된다. (생성자함수는 그런거 없음)

- for in 문으로 키 순회하면 생성자함수는 프로토타입에 있는 것도 나오는데 Class는 안나옴

//Class 와 생성자 함수 비교

// 생성자함수

const User1 = function(name, age){

    this.name = name,

    this.age = age,

    this.showName = function(){

        console.log(this.name)

    }

};

const mike = new User1("mike", 20);

// 클래스

class User2 {

    // 함수대신 constructor가 들어가고 메서드는 constructor 외부에 선언

    constructor(name, age){ // 생성자

        this.name = name; // 속성 : filed 

        this.age = age; // 속성 : field

    }

    showName(){ // 메소드

        console.log(this.name);

    }

}

const cole = new User2("cole",30);

console.log(mike); // User1 { name: 'mike', age: 20, showName: [Function (anonymous)] }

console.log(cole); // User2 { name: 'cole', age: 30 } // 메서드는 프로토타입에 저장

 

 

2. extends : class1에 이것저것 추가한 class2를 만들고 싶다면? (class 상속)

 

- A에게 상속받는 B를 만들고 싶다면 (A 부모, B 자식)

class B extends A {B에 추가로 담길 내용}

 

- 오버라이딩 (overriding) : 덮어쓰기 // '인수를 받아야하는 프로퍼티', '메소드'는 super 키워드 필요

1) 인수 안받아도 되는 부모의 프로퍼티는 알아서 상속됨.

2) 인수 받아야하는 부모의 프로퍼티는 super 키워드를 사용해야 함. // super(매개변수명)

3) 부모 constructor가 정한 매개변수명을 자식 constructor에 그대로 옮겨놔야 함. 

4) 메소드 오버라이딩은 자식 메소드 내부에 부모 메소드 추가 // 자식메소드 실행시 부모메소드까지 함께 실행 // super.메소드명() // 단순히 부모메소드만 사용할거면 안해도 됨. 프로토타입체인으로 ( 자식.부모메소드() ) 이렇게 실행 가능 .

// extends : class 의 상속

class Body {

    constructor(skinColor) {

        this.color = skinColor;

        this.niple = 2;

    }

    bodyMove() {

        console.log("body move")

    }

}

const person2 = new Body("white");

// extends 활용 자식 class 생성

class Arm_Body extends Body {

    constructor(skinColor, fingers) {

        super(skinColor); // 부모 프로퍼티는 이렇게 가져 옴 (인수가 필요한 경우만, 인수없으면 알아서 들어감)

        this.fingers = fingers;

    }

    armMove() {

        super.bodyMove(); // 부모 메소드는 이렇게 가져옴

        console.log("arm move")

    }

}

const person1 = new Arm_Body("black", 5);

 

console.log(person1); // 자식: Arm_Body { color: 'black', niple: 2, fingers: 5 }

console.log(person2); // 부모: Body { color: 'white', niple: 2 }

person1.armMove();

// body move

// arm move

person2.bodyMove();

// body move