[JavaScript] 클래스와 인스턴스

2022.11.18

💡 오늘의 JavaScript 공부

▶️ Class와 Instance

클래스와 인스턴스를 알기위해서는 객체 지향 프로그래밍에 대해 간단하게 알아야 한다.

객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로한 객체를 만드는 프로그래밍 패턴이다.

쉽게 얘기하자면 붕어빵틀이 있고 슈크림붕어빵, 팥 붕어빵 등등을 찍어낸다고 했을 때 여기서 붕어빵 틀이 class 이고 슈크림, 팥이 붕어빵들이 instances가 되는 것이다.

function 붕어빵(앙금){} // Class
let 팥붕어빵 = new 붕어빵('팥')        // instance
let 슈크림붕어빵 = new 붕어빵('슈크림')  // instance

객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만든다. 이때 함수를 사용하는 방법이 조금 다른데 new키워드를 써서 만든다. 이것이 새로운 instance를 만드는 방법이다.

📌 예시

ES6에서 새롭게 추가된 문법이 바로 class문법이다. 자동차를 예로 들면

// Prototype : 모델의 청사진을 만들 때 쓰는 원형 객체 
class Car {
    constructor(brand, name, color){  // Constructor 
        this.brand = brand;  // : 인스턴스가 초기화될 때 실행하는 생성자함수
        this.name = name;
        this.color = color;
    }
}    
  // instance : avante  클래스의 사례
let avante = new Car('hyundai', 'avante', 'black'); // new키워드를 써서 만든 새로운 instance
console.log(avante.color) // black
console.log(avante.brand) // hyundai

let mini = new Car('BMW','mini','white'); // new키워드를 써서 만든 새로운 instance
console.log(mini.brand) // BMW

여기서 this라는 새로운 키워드가 등장하는데 객체지향 프로그래밍에서는 빠지지 않고 등장하는 중요한 키워드이다.

한마디로 this는 인스턴스 객체를 의미한다. parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성시 지정하는 값이며, 위와같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.

속성과 메소드

속성 : brand, name, color....
메소드: refuel(), setSpeed(), drive()....

정리하자면

prototype : 모델의 청사진을 만들 때 쓰는 원형 객체

constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수

this : 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context