[javaScript] 클래스와 인스턴스

클래스 = 붕어빵틀

 

클래스는 새로운 객체를 만들어내기 쉽게 짜 놓은 객체 생성틀이다. 일종의 원형, 아이디어, 청사진 정도로 생각할 수 있다.

마치 붕어빵을 만들기 쉽게하기 위해서 붕어빵틀이 있는 것처럼,

즉, 비슷한 형식으로 여러가지 다른 버전을 만들어야 할 때에 쉽게 복제해 낼 수 있게 하는 도구이다.

이 클래스는 es6문법에서는 이렇게 단순하게 만들 수 있다. 앞에 class만 써주고 이름을 정한 후 중괄호 열어주면 붕어빵틀 만들 준비 끝이다. 

🛑 주의! 클래스명은 보통 대문자로 시작하며, 동사가 아닌 명사로! 작성한다.

class Boongeoppang{
	
	//여기에 클래스내부에 종속될 것들을 정의
    
}

🛑 오브젝트가 처음 어떻게 만들어질지 정의하는 클래스, 붕어빵틀을 원형객체(original form), 프로토타입(prototype)이라고 한다.

---

인스턴스 = 붕어빵틀로 만들어진 붕어빵

 

이렇게 클래스를 이용해서 손쉽게 복제되어 태어난 객체를 특별히 "인스턴스 객체 (instance object)" 혹은 "인스턴스"라고 부른다.

그러니까 붕어빵 틀로 손쉽게 태어난 새로운 붕어빵 하나하나를 인스턴스라고 부른다고 보면 된다. 인스턴스는 클래스의 사례(instance)이다.

 

 

class Boongeoppang{
	
	//여기에 클래스내부에 종속될 것들을 정의
    
}

const Boongeoppang01 = new Boongeoppang(이것저것 속성들 인자로 전달)

인스턴스를 만들때에도 es6에서는 간단하게 new 클래스이름 을 써주어서 새롭게 복제된 인스턴스를 만들 수 있다. 이 때 괄호안에 여러가지 붕어빵의 특성들을 전달해주는데, 이는 다음의 설명하는 constructor 메서드가 받아서 해당 인스턴스의 속성으로 지정해준다.

---

생성자(constructor)함수로 붕어빵의 속성 정의하기

 

같은 붕어빵 틀이지만 피자 붕어빵, 슈크림 붕어빵, 클래식한 단팥 붕어빵 등.. 여러가지 특징들은 다를 수 있다. 또 붕어빵을 굽기 전부터 다 구어지면 어떤 손님에게 가야 하는지도 정해져 있을 수도 있다. 

같은 붕어빵틀에서 만들어지는 붕어빵이지만 붕어빵 하나하나의 속성들이 다른 것이다.

 

이렇듯, 클래스로 만들어지는 오브젝트 하나하나 들도 그  속성들이 다르게 정해질 수 있는데, 그 속성들을 지정하도록 하는 클래스 내의 기본 메서드가 constructor이다. 이 constructor함수는 new를 이용해서 Class의  새로운 인스턴스가 생성될 때 자동 호출되어, 그 인자들을 받아서 해당 인스턴스의 속성으로 설정한다.

new 클래스명(인자) ==> constructor(인자) 자동 실행

🛑 this는 실행 context로, constructor를 품고있는 Class인 Boongeoppang을 의미한다. 이렇게 해줘야 이 객체 내부에 종속시킬 수 있다. 만약 인스턴스를 만들면 그 인스턴스의 this는 붕어빵틀인 클래스가 아니라, 새로 생성된 인스턴스 객체가 된다.

class Boongeoppang{
  constructor(taste, owner){
    this.taste = taste; 
    this.owner = owner;
  }
}
  
  
  const Boongeoppang01 = new Boongeoppang('피자맛','모자 쓴 손님꺼')
  //Boongeoppang01.taste === '피자맛'
  //Boongeoppang01.owner === '모자 쓴 손님꺼'

---

메서드 = 붕어빵틀에 주어진 행동양식

 

메서드는 클래스에 들어있는 함수를 말하는데 

클래스명.메서드()

이런식으로 호출될 수 있다. 앞선 말했던 constructor 역시  자동으로 호출되도록 설정되어 있다 뿐이지, 클래스에 종속된 함수라는 점에서 메서드이다.

 

클래스의 변수들을 긴밀하게 사용해서 이루어지는 함수들을 메서드로 정의해 놓으면 아주 편리하게 각각의 인스턴스들에게 다른 행위를 가할 수 있다.

아래의 함수에서 Boongeoppang01을 뒤집는 행위는 Boongeoppang02의 side에 영향을 주지 않는다는 것을 확인할 수 있다.

class Boongeoppang{
  
   constructor(taste, owner){
    	this.taste = taste; 
        this.owner = owner;
        this.side = '앞면'
    }
    
    flip(){
      console.log(`${this.side}은 이제 됐군`)
      
    	if(this.side === '앞면'){
        this.side = '뒷면'
      }else if(this.side === '뒷면'){
        this.side = '앞면'
      }
      
      console.log(`${this.side}을 굽자`)
    }
    

}
  
  
const Boongeoppang01 = new Boongeoppang('피자맛','모자 쓴 손님꺼')
const Boongeoppang02 = new Boongeoppang('단팥','꼬마손님꺼')
Boongeoppang01.flip()
//'앞면은 이제 됐군'
//'뒷면을 굽자'
Boongeoppang01.flip()
//'뒷면은 이제 됐군'
//'앞면을 굽자'

Boongeoppang02.flip()
//'앞면은 이제 됐군'
//'뒷면을 굽자'

Boongeoppang01.side //앞면
Boongeoppang02.side //뒷면

🛑메서드 호출 방식을 이용할 때에는 this바인딩 이슈 때문에 화살표 함수를 쓰지 않는다. 자세한 사항은 mdn에

---

클래스를 사용하면

이제까지 예시로 알아볼 수 있듯이, 클래스는 비슷한 성질의 객체를 빠르고 쉽게 복제하고, 그 객체 각각에 기능(함수)들을 종속시켜서 정의해 둘 수 있어서 편하다.

다시말해, 빠르게 복제하고, 각각을 서로에게 영향을 끼치지 않고 관리할 수 있다! 

---

클래스의 es5형 문법

위에까지는 간편해진 es6문법을 사용했고, 참고삼아 es5 구형 문법으로 바꿔본다.

보면 맨날 마주치던 prototype이 이런거구나 감이 온다.

fuction Boongeoppang(taste, owner){
   this.taste = taste; 
   this.owner = owner;
   this.side = '앞면'
}
    
Boongeoppang.prototype.flip(){ //📌es5에선 원형객체를 의미하는 prototype를 써서 메서드를 정의해야한다.
      console.log(`${this.side}은 이제 됐군`)
      
    	if(this.side === '앞면'){
        this.side = '뒷면'
      }else if(this.side === '뒷면'){
        this.side = '앞면'
      }
      
      console.log(`${this.side}을 굽자`)
}
  
  
const Boongeoppang01 = new Boongeoppang('피자맛','모자 쓴 손님꺼')
Boongeoppang01.flip()

---

관련글

[javaScript] 프로토타입 체인

[javaScript] 프로토타입

[javaScript] 객체지향프로그래밍