Javascript - 프로토타입, 클래스, 상속

Javascript

 

🤠 프로토타입

일반적으로 객체는 재활용 어렵다!
그래서 객체를 재활용할 수 있는 구조화 시키는 것이 필요!
그것이 바로 프로토타입화

프로토타입 : 재사용을 통해 객체를 생성하는 역할을 담당

 

const Car = (function(){

        // 생성자 파트 - 외부로부터 전달된 데이터들을 함수구문 내부에서 활용
        function Car(name1, color1){
            this.name = name1;
            this.color = color1;
        }
        
	// 프로토타입 파트
        Car.prototype.start = function(){
            console.log(`${this.color} ${this.name} 시동을 건다. `);
            this.drive();
        }
        
        Car.prototype.drive = function(){
            console.log(`${this.color} ${this.name} 주행을 한다. `);
        }
        
        return Car;
    })(); // 즉시실행 함수

 

활용해보자

const avante = new Car("아반떼", "검정색");
avante.start();

const tusan = new Car("투싼", "노란색");
tusan.start();

start() 메소드 내부에 drive()가 있기 때문에

 

이런식으로 출력이 된다!

 

 

 

🤠 클래스화

ES6 이후에 객체를 클래스화 시킴

class NewCar{
    //생성자 : 클래스 내부에 객체를 생성
    constructor(name1, color1){
        this.name = name1;
        this.color = color1;
    }

    // 기능 : 행동수칙
    start(){
        console.log(`${this.color} ${this.name} 시동을 건다.`);
        this.drive();
    }
    drive(){
        console.log(`${this.color} ${this.name} 주행을 한다.`);
    }
}

const NewAvante = new NewCar("뉴 아반떼", "코드블루");
NewAvante.start();
const NewTusan = new NewCar("뉴 투싼", "메탈블랙");
NewTusan.start();

 

✔ class 작성간 주의사항

 

1. class라는 함수 개념은 호이스팅이 적용되지 않음!

class 인자가 먼저 선언되고, 관련된 호출이 나중에 문서에 작성되어야 함!!!!!

const gift1 = new CartBox1("옥스포트 블록");
gift1.inBox(); // Uncaught ReferenceError: Cannot access 'CartBox1' before initialization

class CartBox1{
    constructor(item){
        this.item = item;
    }
    inBox(){
        console.log(`장바구니 상품 : ${this.item}`);
    }
}

호이스팅이 적용되지 않아서 스크립트 이전에 호출할 시 에러!

2. 실제 전달되는 생성자와 행동으로 이어질 수 있는 기능을 동일한 명칭으로 작성했을 때

class CartBox2{
    constructor(item){
        this.item = item;
    }
    item(){
        console.log(`장바구니 상품 : ${this.item}`);
    }
}
const gift2 = new CartBox2("레고블록");

console.log(gift2); // 함수가 없음! CartBox2 {item: '레고블록'}

 

 

🤠 상속

상속 : 부모 인자의 메모리 영역을 자식의 영역에 전달하여 활용한다.

 

class Zoo{
    // 생성자 파트
    constructor(animalName, animailFood){
        this.name = animalName;
        this.food = animailFood;
    }

    // 기능 파트
    feed(){
        console.log(`${this.name}에게 ${this.food} 를 주었습니다. `);
    }
}

이렇게 부모-동물원 클래스를 만들고

기능으로는 feed()

 

class Rabbit extends Zoo{
    // 상속을 받아서 필요없음
}
const rabbit = new Rabbit("토끼", "피자");
rabbit.feed(); // 토끼에게 피자 를 주었습니다.

그리고 자식-동물 클래스를 만들고 extends 부모-동물원을 하게 되면

어짜피 상속을 받으니 클래스 내부 정의할 필요가 없음

 

 

여기서 정말 좋은게

메소드 오버라이드도 가능!!

 

메소드 오버라이드 : 기존 상속받은 메소드에 덮어쓰기를 하여 구현한다.

 

 

class Monkey extends Zoo{
    feed(){
        console.log(`${this.name}는 감기에 걸려서 ${this.food} 를 버렸습니다.`);
    }
}
const monkey = new Monkey("원숭이", "파스타");
monkey.feed(); // 원숭이는 감기에 걸려서 파스타 를 버렸습니다.

오버라이드를 통해 원숭이는 음식을 버리도록 했음

싸가지없는

 

 

 

아무튼 자바에서의 개념을

여기서 다시 보니 넘 반가웠다