자바스크립트 기초(상속)

상속(Inheritance)이란?

- 자바스크립트의 상속은 기존의 객체나 생성자 함수를 기반으로 새로운 객체나 생성자 함수를 생성하는 것을 말한다.

- 기존의 객체를 바탕으로 만들어지므로 상속을 통해 새로 만들어지는 객체에는 기존 객체의 특성을 모두 가지고 있다.

- 이를 기존의 객체에서 유산(속성과 메서드)을 물려받는 것과 비슷하다고 하여 상속이라는 말을 사용한다.

- 다시 말해, 상속을 사용하면 이전에 만들었던 객체와 비슷한 객체를 쉽게 생성할 수 있습니다.

 

class Origin{
    constructor(value){
        this.value = value;
    }
    method01(){
        console.log("메소드01 호출했다!")
    }
    method02(){
        console.log("메소드02 호출했다!")
    }
}

// Origin을 상속받아서 새로운 클래스 하나 만들자!
// 이 안에는 Origin의 멤버변수와 멤버함수가 다 들어있다!
class FatOrigin extends Origin{
    method03(){
        console.log("메소드03 호출했다!")
    }
}
const fo = new FatOrigin("값");
fo.method01();
fo.method02();
fo.method03();
/*
위 예에서 Origin은 상속을 해 주는 객체(설계도),
FatOrigin 은 상속을 받는 객체(설계도)이다.
이럴 때는 주로
Origin 을 부모클래스, 슈퍼클래스, 기초클래스, 상위클래스 라고 하고
FatOrigin 을 자식클래스, 서브클래스, 유도클래스, 하위클래스 라고 한다.
*/

 

빌트인 오브젝트 상속 : 내장 객체를 상속받아 기능을 확장할 수 있다.

super : 상속을 해준 부모클래스를 의미하는 키워드이다. super 키워드를 호출하여 부모클래스의 메소드를 호출할 수 있다.

 

메소드 오버라이딩 : 물려받은 메소드를 자식 클래스가 재정의할 수 있다.

 

ex)

// 내장 객체를 상속받아서 커스텀 클래스 만들기!
class ExtendArray extends Array{
    // 서브클래스의 생성자 : 슈퍼클래스의 생성자를 호출해주어야 한다!
    constructor(){
        // super : 슈퍼클래스를 대신해 사용되는 키워드!
        super();
    }
    // 이 배열에 들어 있는 각 요소의 총합을 반환!
    getTotal(){
        let total = 0;
        for(let i =0; i < this.length; i++){
            total += this[i];
        }
        return total;
    }
}
/*
const arr = new ExtendArray() // 확장된 배열로 객체 생성하기!
arr.push(10);arr.push(20);arr.push(30);arr.push(40);
console.log(arr.getTotal())
*/
// 내가 만든 서브 클래스를 또 상속해서 또 서브클래스 만들기
class StrangeExtendArray extends ExtendArray{
    constructor(){
        super();
    }
    // 이미 getTotal은 상속받아 존재하는 상태이지만, 다시 짤래!
    // => 메소드 오버라이딩(overriding) 또는 메소드 재정의
    getTotal(){
        let total = 0;
        for(let i =0; i < this.length; i++){
            total += (this[i] *5)
        }
        return total;
    }
}
const exArr = new ExtendArray() // super
const stArr = new StrangeExtendArray() // sub

exArr.push(10);exArr.push(30);
stArr.push(10);stArr.push(30);

console.log(exArr.getTotal()) // 10 + 30 = 40
console.log(stArr.getTotal()) // 10*5 + 30+5 = 200

 

다형성(polymorphism)

 

- 다형성(polymorphism)이란 하나의 객체가 여러 가지 타입을 가질 수 있는 것을 의미한다.(동적으로 자료형이 바뀌어짐)

- 자바에서는 이러한 다형성을 부모 클래스 타입의 참조 변수로 자식 클래스 타입의 인스턴스를 참조할 수 있도록 하여 구현하고 있다. 자바스크립트에서는 해당 기능이 없지만 흉내낼 수 있다.