[JavaScript] 클래스(this, constructor, 상속, 오버라이딩)

클래스 

: 오브젝트를 생성하기 위한 설계도. 기존 자바스크립트의 프로토타입을 대체할 수 있으며, 클래스를 통해 정의한 오브젝트는 Array, Date 등 내장 객체와 동일하게 취급할 수 있다.

 

-> 클래스 선언문 기본형

 

메소드

 

클래스 내부에 정의된 함수는, 객체의 멤버함수와 마찬가지로 메소드라 부른다. new 연산자에 의해 실제 사용 가능한 객체를 생성하며, 생성된 객체를 통해 메소드를 호출할 수 있다.

 

-> 메소드 정의 시에는 function 키워드를 생략할 수 있다.

 

예제)

// 클래스를 만들자
class Member{
    numebr =3; // 속성
    // 메소드
    getName(){
        console.log(this)
        return "이름"
    }
}
const date = new Date();
const member = new Member();
console.log(member.getName())

클래스는 프로토타입을 문법적으로 대체한다

자바스크립트 엔진이 이를 대할 때는 포로토타입을 대할 때와 크게 다르지 않다.

 

this

JavaScript 에서의 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 차조 변수 이다

this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로터티나 메소드를 참조할 수 있다.

 

웹문서 조작을 위해 작성된 자바스크립트에서, 전역 키워드 this는 window 객체를 의미한다. 이벤트 발생 시에 this는 이벤트가 발생한 DOM을 의미한다. 그러나 메소드 내에서 this는 클래스 오브젝트를 의미한다.

 

 

Constructor

클래스에는 '생성자' 함수가 존재한다. 이는 new 연산자를 통한 클래스 오브젝트 생성시 최초로 동작하는 메소드이며, constructor라는 이름을 사용한다.

-> 주로 생성한 객체의 멤버 변수를 초기화하는 역할을 한다!

 

예제)

// 생성자 역할을 하는 constuctor!
class Penguin{
    // 예외 없이 , 무조건 생성될 때 동작한다!
    constructor(name){ // 생성자 호출
        // 생성자 함수 또한 함수이므로 매개변수 사용 가능
        console.log("펭귄이 태어났다!") 
        this.name = name
    }
    flying(){
        console.log("펭귄이 하늘을 난다~!")
       }
    getName(){
           return this.name; // 이 객체가 가진 맴버변수 name을 리턴
       }
}
const p1 = new Penguin("펭수");
p1.flying();
// console.log(p1.name)
console.log(p1.getName())
const p2 = new Penguin("뽀로로");
console.log(p2.getName())
const p3 = new Penguin("핑구");
console.log(p3.getName())
const p4 = new Penguin("펭순이");
console.log(p4.getName())

클래스의 상속

상속은 선언을 마친 클래스로부터 메소드와 속성을 물려받는 것을 의미한다. 상속 시에는 기존 클래스로부터 extends 키워드를 통해 상속을 받는다.

 

예제)

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 키워드를 호출하여 부모클래스의 메소드를 호출할 수 있다.

 

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

 

예제)

// 내장 객체를 상속받아서 커스텀 클래스 만들기!
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