[내배캠 TIL ] 2주차 목요일

오늘은 클래스 생성에 대해 연습을 했다.  오늘은 어쩐일인지 이해가 살짝 잘 된것 같기도하다.

그럼 오늘 새로 알게된 class 라는 예제를 들어 내가 알게된점/원리를 적겠다.

 

1.먼저 class 라는 키워드를 사용해 객체이름을 아무거나?...과일(fruit)로 작성해준다. 

2. 그 다음 constructor 라는 생성자 함수를 사용한다. 그렇게 되면 코드는 이렇게 작성된다.

class fruit { constructor () {} }

3. 그 다음  constructor 안쪽에는 class를 이용해 객체를 만들때 들어가야할 값들을 넣는다.

예시는 과일이니까 3개정도만 넣어보겠다.   ex )) apple , apple , grape

class fruit { 
 		constructor (apple, banana, grape) {}
            }

4. 여기서 중요한건  constructor 함수를 사용하면 항상 같이 들어가야할것이 있다.  바로 " this "

여기서의 this 는 객체의 실체(apple ,banana, grape) 를 이야기한다. 그리고  메서드를 만들어야 하는데 

메서드 이름은 color로 하겠다. 
그리고나서 const ( let 도 가능) fruit1 으로 잡고 new fruit 이라고 새로운 객체를 만든다.

class fruit {
    constructor (apple, banana, grape) {
        this.apple = apple;
        this.banana = banana;
        this.grape = grape;
    }
    color () {
        console.log(apple+"색입니다!");
    }
}

const fruit1 = new fruit("사과는 빨간");
fruit1.color();

이렇게 나오는데 터미널에 콘솔을 찍어본 결과는!?

오류

이렇게 오류가 뜬다. 메세지를 읽어보면 8번째줄에 apple을 정의할수없다고 문제가 생긴거 같은데...

이 이유는 fruit 라는 설계도 안에서 apple을 사용하기 위해선 consol.log 쪽에 apple의 인스턴스를 가져와야하는데

이러기 위해선 this를 붙여야한다.  this를 붙이고나서 다시 출력한 결과는,

이렇게 잘 뜨는것을 확인 할수있다. 이렇게 객체를 만들고 그 안의 값을 사용하기 위해선 앞에 this 를 붙여야 한다는 사실.

그리고 나머지 banana, grape도  똑같이 출력을 해보면,

 

완성

정상적으로 출력이 되었다. 이렇게 오늘은 기본이지만, 알아야 할  class 생성에 대해 알게 되었다.