[TIL] 자바스크립트 클래스와 상속, 오버라이딩,오버로딩 차이

zero_0·2021년 9월 13일
0

TIL

목록 보기
4/6
post-thumbnail

클래스

class Cat {
    constructor(name) { //클래스 인스턴스 생성하기(생성자 함수)
        this.name = name; //초깃값 설정
    }

    showName() { //이름을 보여줘 함수
        console.log(this.name) //this는Cat class를 의미
    }
}

let cat = new Cat('youngei');
cat.showName();
console.log(cat);
  • 클래스 : 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀(재사용하기 위함)
  • 생성자 함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기 값을 설정한다고 생각하세요!)하는 역할을 합니다.

상속

  • 상속 : 상속한다는 건, 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만든다는 거예요.
  • super : 부모의 constructor를 호출하면서 인수를 전달한다.
    부모 클래스에 대한 필드나 함수를 참조할 수 있다.

class Cat {
    constructor(name) { //클래스 인스턴스 생성하기(생성자 함수)
        this.name = name; //초깃값 설정
    }

    showName() { //이름을 보여줘 함수
        return this.name; //this는Cat class를 의미
    }
}

class MyCat extends Cat { //Cat 클래스 상속 받아오기
    constructor(name, age) {
        super(name); //super을 매서드로 사용
        this.age = age;
    }

    showName() {
        //오버라이딩: 부모 클래스와 같은 이름의 함수 만들기
        return '내 고양이 이름은' + super.showName()+'입니다';
    }

    showAge() {
        console.log("내 고양이는" + this.age + '살 입니다!');
    }
}
let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

오버라이딩, 오버로딩 차이점

  • 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용 (메소드 내부를 입맛에 맞게 변경)
  • +오버로딩 : 한 클래스 내에, 여러개의 같은 이름의 메소드를 정의하는 것을 말한다. 이렇게 메소드의 이름을 동일하게 만들어 프로그램의 가독성을 증가시킬 수 있다. (매개변수의 타입이 다르거나 개수가 달라야 한다.)

    차이점 : 오버로딩은 매개변수나 타입이 달라야하지만 오버라이딩은 동일해야하고 오버로딩은 리턴 타입이 무엇이든지 상관없지만 오버라이딩은 동일해야한다는 차이점이 있다.

profile
차근차근 채워가는 it일지

0개의 댓글