[ES6] Class & ProtoType

Class 문법

👩‍🎓 클래스 문법이 뭘까?
Class문법은 오브젝트를 생성해주는 기계라고 생각하면 된다.

🙎‍♂️ 예를들어) 내가 정보제공사이트를 만든다는 가정
오버워치에 등장하는 영웅들의 정보를 정리해서 보여주기로 함.

📖 필요한 것

1. 영웅들의 정보
2. 영웅들의 이미지
3. 정보와 이미지를 넣을 공간
   
   

👩‍🎓 여기서 생각 하는 것이, 영웅들의 정보와 이미지는 다 다르지만 넣을 공간은 다 똑같으니까, 어떻게 묶을 순 없을까? 또는 나중에 새 영웅이 추가되면 이미 만들어진 틀에 정보만 넣을 순 없을까 하고 생각해서 나온게 Class문법

📝 Class문법 예시

function 기계(skill){
 this.Shift = skill[0]
 this.E = skill[1]
 this.Q = skill[2]
}

var 겐지 = new 기계(["질풍참","튕겨내기","용검"])

// 설명 별거없다 함수실행하고 파라미터 넣고 new를 쓰면 class문법 성공
// 이제 이걸 원하는 변수에 넣으면 됨.

이렇게 코드를 짠 후 겐지를 console로 찍어보면

겐지 {Shift : "질풍참",E : "튕겨내기", Q : "용검"}

이렇게 나온다.

👩‍🎓 위의 방식은ES5까지의 방식이고 ES6부터는 constructor을 사용

Class Hero{
 constructor(skill){
  this.Shift = skill[0]
  this.E = skill[1]
  this.Q = skill[2]
  }
}

var 겐지 = new Hero(["질풍참","튕겨내기","용검"])

constructor을 쓰는 이유는 파라미터를 받기 위함

Class를 배웠으면 꼭 알아야하는 ProtoType

이렇게 Class를 통해서 만들어지는 변수들은 Class에서 태어났다고 해서 Prototype 이라는 유전자를 가지고 태어남.

👩‍🎓 그렇다면 Class에 새로운 정보를 업데이트하면 어떻게 될까?

Hero.prototype.name = "겐지"

위에서 prototype이 유전자라고 말했다면 부모가 가지고 있지 않던 유전자에 정보를 추가하는 것은 유전자조작 같은거다.

이제 콘솔에서 겐지.name을 찍어주면 "겐지"가 출력되는 것을 볼 수 있다.


👩‍🎓 근데 이상하게 콘솔로 겐지를 찍으면 name이 나오지 않는다 이게 무슨일인가?

자바스크립트는 object를 가져올 때 가져올 타겟에서 name이 없다고 하면 그 부모에게서 name을 찾음 그래서 우리가 위에서 name이란 유전자를 추가해서 조작했기 때문에 출력이 되는 것.

👏 끝.