Java Script '클래스(Class)'

클래스란 ? 

 

상위 생성자를 통해 하위 클래스에게  '메서드' 또는  '객체'의 키를 상속을 하게 된다.  

 

이말은 상위 생성자의 안에 있는 키를 이용해 하위 클래스에서 새로운 값을 부여할 수도 있으며 ,

메서드 또한 사용해 함수에 대한 기능을 사용할 수 도 있다. 

 

그러면 

 

프로토타입과 같은 것 아니냐라는 생각이 들 수 있다. 

 

하지만 같지않다. 

---

 

 

▶먼저 프로토타입에 대해서 잠깐 설명하면 프로토타입은 하위객체가

생성자함수의 프로퍼티와 메서드를 가져다가 쓰게 된다.   

가져다가 쓴다라는 말은 생성자 함수 내부를 찾아가서 그 안에 있는 기능을 찾아오는 것이다. 

반면에 클래스는 생성자가 하위 클래스에게 내부 기능을 사용할 수 있게 주는 것이다. 

 

 

 

비유를 하자면  프로토타입을 도장이라고 했을때  생성자에서 도장을 만들어 내용을 각인하고 

하위 객체에게 찍어서 준다라고 했을때 

클래스는   최상위에 필요한 것들만 각인한 후 도장을 만들어 하위객체에게 도장자체를 준다는 개념이다. 

 

 

 

 

◈같다라고 생각하면 전혀 감이 잡히질 않기 때문에

아예 다르다생각하고 둘중 하나를 선택해 사용하는 것이 좋을 것 같다! 

 

 

 

프로토타입과  클래스를 만들어 콘솔로 확인하면 정확히 알 수 있다. 

 

프로토 타입과 클래스 모두 같은 함수를 생성자에 넣어두었다. 

 

그랬을때 프로토타입 하위객체('자식프로토타입')에는 함수를 출력하지 않지만 값을 출력해 내고 있다. 

 

그 말은 프로토 타입으로 생성자함수를 찾아들어가 함수를 사용하는 것이다. 

 

반면에 클래스는 자식클래스에게 함수를 그대로 전달하여 사용한다.

 

 

 

 

 

◎코드 사용법 

 

위에서 콘솔로 확인한 것에 대한 코드이다.

class Counter {            -> 1.클래스 선언
  name;                    -> 2.사용할 키 
  
constructor(name) {        -> 3.부모생성자 생성
    this.name = name;
 }

test = (num) => {          -> 4.함수를 사용해 객체안에 함수 즉 메서드 생성방법
    return num * 2;           여기에서 함수는 표현식으로 작성하면 프로토타입에 저장되기때문에
  };                          애로우 함수를 사용하는 것이 편리함.


const count = new Counter("클래스");      -> 4.인스턴스 생성

console.log(count.test(3));               -> 5.함수 실행
console.log(count);

class Counter2 extends Counter {      -> 6.자식 클래스 생성 class 자식클래스명 extends 부모클래스명
  constructor(name) {                             <- 자식에서 새로운 키나 메서드를 추가할때는 부모클래스를 
    super(name);                                     실행시켜야함. 새로생성하는게 없으면 생략가능
    // super는 Counter 즉 부모 클래스를 말합니다.
  }
}

const count2 = new Counter2("자식 클래스", 3);   -> 7.자식 클래스 인스턴스 생성
console.log(count2.test(5)); 
console.log(count2);

 

추가적으로

2. 키를 넣을때 앞에  #을 추가하게 되면 고정이되서

하위클래스에서  값을 넣어주어도 변경되지 않는다 . 

class Counter {      
   name;
  #pricount;
  
  constructor(name) {
    this.name = name;
    this.#pricount = 0;
  }

상위에서 #을 넣고 0을 값을 넣었을때  0은 변경하지 못하며

심지어 저렇게만 사용하면 하위클래스에서 값을 찾을 수 도 없다.

 

값을 하위 클래스에서 보려면 부모 클래스의 객체에 메서드 하나를 추가해야한다! 

 

    getPricount = () => {
      return this.#pricount;
    };

이 메서드를 가지고 # 키 에 내부에 값을 보게하는 것이다.