16. class (상속)

📌 16-1 상속

상속을 통해서 자신의 특성을 유지하고 다른 클래스의 특성을 사용할 수 있다.

• 클래스에 다른 클래스를 포함시키는 형태이다.
• 상속받은 클래스의 메소드와 프로퍼티를 사용할 수 있다.
• 코드를 재사용할 수 있게 해준다.
• 상속 해주는 클래스를 부모 클래스, 수퍼 클래스라고 한다.
• 상속받는 클래스는 자식 클래스, 서브 클래스라고 한다.

📌 16-2 extends 키워드

상속을 구현할 수 있게 하는 문법이다.

• extends 문법을 사용하여 클래스를 확장시킨다.
• extends 키워드를 사용하면 코드를 직관적으로 해석할 수 있다.

🧩 class 자식 클래스 extends 부모 클래스

// 수퍼 클래스를 생성한다.
class SuperClass {
    log1() {
        console.log("SuperClass");
    }
}
// extends를 이용하여 상속을 구현한다.
class SubClass extends SuperClass {
    log2() {
        console.log("SubClass");
    }
}
// 인스턴스 생성
const subClass = new SubClass();
// 결과 : SuperClass
subClass.log1();
// 결과 : SubClass
subClass.log2();

🔥 수퍼 클래스의 메소드를 서브 클래스가 사용할 수 있다.

🧩 동적 상속

let isChecked = true;
class SuperClass1 {
    log1() {
        console.log("SuperClass1");
    }
}
class SuperClass2 {
    log1() {
        console.log("SuperClass2");
    }
}
// 3항 연산자를 사용해서 상속받을 클래스를 결정한다.
class SubClass extends (isChecked ? SuperClass1 : SuperClass2) {
    log2() {
        console.log("SubClass");
    }
}
const subClass = new SubClass();
// 결과 : SuperClass1
subClass.log1();

let isChecked = true;

class SuperClass1 {
    log1() {
        console.log("SuperClass1");
    }
}
class SuperClass2 {
    log1() {
        console.log("SuperClass2");
    }
}
// class가 상속받기 이전의 isChecked 상태로 상속받을 클래스가 결정된다.
isChecked = false;
class SubClass extends (isChecked ? SuperClass1 : SuperClass2) {
    log2() {
        console.log("SubClass");
    }
}
// 결과 : SuperClass2
const subClass = new SubClass();
subClass.log1();

🔥 상속받기 전의 상태를 확인하여 클래스를 동적으로 상속을 지정한다.

📌 16-3 super 키워드

상속을 받은 수퍼 클래스의 프로퍼티를 사용하거나 클래스의 메소드를 서브 클래스의 안에서 사용이 가능하게 만드는 문법이다.

• 함수로 호출할 수 있다.
• 참조값으로 사용할 수 있다.

🧩 super 함수 호출

// 학생 클래스를 생성
class Student {
    constructor(name, age, classCode) {
        this.name = name;
        this.age = age;
        this.classCode = classCode;
        console.log(this.name, this.age, this.classCode);
    }
}
// 교수 클래스를 생성
class Professor {
    constructor(name, age, classScale) {
        this.name = name;
        this.age = age;
        this.classScale = classScale;
        console.log(this.name, this.age, this.classScale);
    }
}
// 결과 : Kim 23 A12
const student = new Student("Kim", 23, 'A12');
// 결과 : Lee 41 30
const professor = new Professor("Lee", 41, 30);

클래스를 2개 생성하여 인스턴스를 만들면 중복된 정보가 2번 선언된다.

// 각각의 공유하는 특성인 name과 age를 관리하기 위한 학교 클래스를 생성
class School {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
// 학교 클래스를 상속 받아서 사용한다.
class Student extends School {
    constructor(name, age, classCode) {
        // super를 함수로 호출하여 사용한다.
        super(name, age);
        this.classCode = classCode;
        console.log(this.name, this.age, this.classCode);
    }
}
// 교수 클래스를 상속 받아서 사용한다.
class Professor extends School {
    constructor(name, age, classScale) {
        // super를 함수로 호출하여 사용한다.
        super(name, age);
        this.classScale = classScale;
        console.log(this.name, this.age, this.classScale);
    }
}
// 결과 : Kim 23 A12
const student = new Student("Kim", 23, 'A12');
// 결과 : Lee 41 30
const professor = new Professor("Lee", 41, 30);

• super를 함수로 호출하여 상속을 이용하면 수퍼 클래스인 학교 클래스에는 공통적인 특성을 지정하고 서브 클래스인 학생, 교수 클래스에는 각각의 고유한 특성을 지정하여 더욱더 효율적이게 관리할 수 있게 된다.
• super 함수 호출을 하면 수퍼 클래스의 constructor를 호출하게 된다.

🧩 오버라이딩
상속을 받은 서브 클래스의 메소드나 프로퍼티가 부모 클래스의 이름과 겹치면 서브 클래스의 메소드와 프로퍼티가 호출된다.

class School {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    info() {
        console.log(`이름은 ${this.name} 입니다.`);
        console.log(`나이는 ${this.age} 입니다.`);
    }
}

class Student extends School {
    constructor(name, age, classCode) {
        super(name, age);
        this.classCode = classCode;
    }
    info() {
        console.log(`강의실의 고유코드는 ${this.classCode} 입니다.`);
    }
}

class Professor extends School {
    constructor(name, age, classScale) {
        super(name, age);
        this.classScale = classScale;
    }
    info() {
        console.log(`강의실의 총 학생 수는 ${this.classScale} 입니다.`);
    }
}

const student = new Student("Kim", 23, 'A12');
const professor = new Professor("Lee", 41, 30);
// 결과 : 강의실의 고유코드는 A12 입니다.
student.info();
// 결과 : 강의실의 총 학생 수는 30 입니다.
professor.info();

• 이름이 같으면 프로토타입 체인으로 가장 먼저 만나는 같은 이름의 요소를 사용하기 때문에 일어나는 문제이다.
• super 참조로 해결이 가능하다.

class School {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    info() {
        console.log(`이름은 ${this.name} 입니다.`);
        console.log(`나이는 ${this.age} 입니다.`);
    }
}

class Student extends School {
    constructor(name, age, classCode) {
        super(name, age);
        this.classCode = classCode;
    }
    info() {
        // super를 참조해서 학교 클래스의 info 메소드를 가져와 사용한다.
        super.info();
        console.log(`강의실의 고유코드는 ${this.classCode} 입니다.`);
    }
}

class Professor extends School {
    constructor(name, age, classScale) {
        super(name, age);
        this.classScale = classScale;
    }
    info() {
        // super를 참조해서 학교 클래스의 info 메소드를 가져와 사용한다.
        super.info();
        console.log(`강의실의 총 학생 수는 ${this.classScale} 입니다.`);
    }
}

const student = new Student("Kim", 23, 'A12');
const professor = new Professor("Lee", 41, 30);
/*
결과 : 
이름은 Kim 입니다.
나이는 23 입니다.
강의실의 고유코드는 A12 입니다.
*/
student.info();
/*
이름은 Lee 입니다.
나이는 41 입니다.
강의실의 총 학생 수는 30 입니다.
*/
professor.info();

super 참조를 사용해서 오버라이딩 문제를 해결하고 공통적인 메소드의 문제도 해결하며 추가해서 사용이 가능하게 된다.

🔥 자바스크립트는 오버라이딩은 지원하지만 오버로드는 지원하지 않는다. 타입스크립트를 사용해서 가능하다.

📌 16-4 빌트인 오브젝트 상속

빌트인 오브젝트 상속 빌트인 오브젝트를 상속 받으면 빌트인 메소드와 프로퍼티를 사용할 수 있다.

• 사용목적은 프로토타입으로 직접 빌트인 오브젝트에 메소드를 연결하면 라이브러리 등등 호환문제가 발생한다.
• 상속 받는 클래스를 만들어서 따로 관리할 수 있다.

// (1)
class NewArray extends Array {
    // (2)
    divide(n) {
        const result = [];
        for(let i = 0, j = this.length; i < j; i += n) {
            const item = this.slice(i, i + n);
            result.push(item);
        }
        return result;
    }
}
// (3)
const newArray = new NewArray(1,2,3,4,5,6,7,8);
// (4)
const divideArr = newArray.divide(3);
// (5)
console.log(divideArr);

📋 코드 동작 과정
① 빌트인 오브젝트인 Array를 상속 받는다.
② 1차원 배열을 요소를 n만큼의 요소로 나누고 2차원 배열로 반환하는 함수 선언
③ 인스턴스 생성
④ divide 메소드의 결과를 변수에 저장
⑤ divideArr 출력