[2022-11-09 새싹 프론트엔드] class

2022-11-09 공부내용

• class란? 
• class사용이유
• 프로토타입이란?
• 생성자함수란?
• .this 키워드란?

 

 

class를 사용하는 이유

프로토타입이란(prototype)?

new 연산자를 사용하여 생성자함수의 값을 가져오게되면 같은값을 여러번 자식들에게

뿌려주게된다. 이때 여러번 같은 값을 뿌려주게되면 데이터가 낭비되게 되는데

JS는 생성자 함수안에 값을 어딘가 빈공간에 그 값을 저장해놓고 new 연산자를 사용한

자식에겐 공간안에 있는 값을 공유해준다. 이것을 가능하게 하는것이 프로토타입

생성자함수를 통하여 생성한 인스턴스들은 프로토타입이라는 속성을 상속받게된다.

생성자 함수를 사용하면 아래처럼 porototype이라는 속성값을 따로 줘서 프로토타입에 

저장시켜야하지만 class를 사용하면 알아서 prototype으로 저장시켜준다.

 

 

JavaScrip는  객체지향 프로그래밍 언어이다.

컴퓨터 프로그래밍의 한가지 기법으로 객체를 만들고 객체를 사용하는 프로그래밍 방법을 말한다
프로그램을 그저 데이터와 처리방법으로 나누는게 아니고, 프로그램을 다수의 "객체"를 만들고, 이들이 서로 상호작용을 통해 만들어지는 방식이다.

 

// function 생성자 함수를 사용한 인스턴스 생성시
껍데기1에있는 내용을 바탕으로 인스턴스 생성시  이름~~~ showA까지 항상 다 읽어내려간다
이렇게 되면 데이터가 낭비되게되는데 아래의 코드에서 프로토타입의 정보를 따로 빼준다면
데이터 낭비를 최소화 시킬 수 있다.

      function 껍데기1(색상매변, 휠색상매변, 썬루프매변) {
        this.이름 = "미니";
        this.색상 = 색상매변;
        this.휠색상 = 휠색상매변;
        this.바퀴 = 4;
        this.출시년도 = 2018;
        this.썬루프 = 썬루프매변;
        this.showA = function () {
          console.log(this.name);
        };
      }

      let 철수차 = new 껍데기1("블랙색", "줄무늬", "없음");
      
      
   // 프로토 타입으로 따로 빼기
   껍데기1에 있는 변수가 아닌 상수의 값들을 prototype으로 저장시키면
   데이터 낭비를 최소화 시킬 수 있는데 번거롭다는 단점이 있다
   아래처럼 코드를 짜면 데이터를 낭비하지않고 짤 수 있다
   
         function 껍데기1(색상매변, 휠색상매변, 썬루프매변) {
        this.색상 = 색상매변;
        this.휠색상 = 휠색상매변;
        this.썬루프 = 썬루프매변;
      }
   
   껍데기1.prototype.이름 = "미니";
   껍데기1.prototype.바퀴 = 4;
   껍데기1.prototype.출시년도 = 2018;
   껍데기1.prototype.showA = function () {
          console.log(this.name);
        };
        
// class사용시

      class 껍데기2 {
        constructor(색상매변, 휠색상매변, 썬루프매변) {
          this.이름 = "미니";
          this.색상 = 색상매변;
          this.휠색상 = 휠색상매변;
          this.바퀴 = 4;
          this.출시년도 = 2018;
          this.썬루프 = 썬루프매변;
        }
        showA() {
          console.log(this.name);
        }
      }

      let 영희차 = 껍데기2("회색", "무늬없음", "있음");

 

---

class란?

객체를 생성하기위한 수단

 

객체를 만들기 위해선 직접 작성해서 만들수도 있지만

class로 틀을 짜서 객체를 찍어낸다면 더 손쉽게 객체를 만들어낼 수 있다.

 

class => 붕어빵기계

객체 => 안에 있는 붕어빵

 

 

class(붕틀) , 객체(붕어빵)

 

class는 똑같은 데이터(붕틀)를 값만 바꿔야할때(내용물) 사용한다.

function을 사용하여 class와 동일하게 만들 수 있다.

class는 object를 뽑는 기계

let 슈크림붕어빵 ={
  a: 슈크림넣기
  b: 5분뒤뒤집기
}

let 팥붕어빵 ={
  a: 팥넣기
  b: 3분뒤뒤집기
}


let 고구마붕어빵 ={
  a: 고구마넣기
  b: 4분뒤뒤집기
}

만약 5천개의 붕어빵 종류를 만들어야한다면 5천개의 코드를 생성해야한다.
비슷한 object를 많이 만들어야할떄, 혹은 반복적으로 사용해야할떄 class를 사용하면 된다.


위처럼 붕어빵을 만드는 방법은 같지만 결과값이 다를때 사용하면 된다

 

---

class 문법

class안에 있는 constructor는 객체를 건설해주는 메소드()이다.

constructor	객체를 생성해주는 메소드() 생략가능(생략 시, 빈 생성자가 만들어짐) 클래스 내에 최대 1개만 존재해야함

 

class 생성

객체생성

 

---

 

 

class는 생성자함수와는 달리 new를 사용하지않으면 안된다.

생성자 함수에서 new를 쓰지않고 사용하게되면 "철수차" 라는 변수값에 껍데기라는 값을 대입한 것이기 떄문에

변수선언은 되었지만 대입된 값이 없기 때문에 undefined과 반환된다.

하지만 class는 new라는 연산자를 쓰지않고 객체를 생성하게되면 에러가 뜬다.

생성자함수(좌)   class(우)

 

---

생성자 함수란?

{객체}를 생성할 때 사용하는 함수

여러개의 통일된 , 동일한 속성을 가지는 객체를 생성하기 위해

필요하다.

대부분의 값은 같지만 옵션이 몇 개만 다를 때

함수에 매개변수를 만들어서 값만 계속 바뀔 수 있도록 하면 된다.

 

인스턴스란?

생성자함수를 통하여 탄생한 객체

 

프로토타입이란(prototype)?

new 연산자를 사용하여 생성자함수의 값을 가져오게되면 같은값을 여러번 자식들에게

뿌려주게된다. 이때 여러번 같은 값을 뿌려주게되면 데이터가 낭비되게 되는데

JS는 생성자 함수안에 값을 어딘가 빈공간에 그 값을 저장해놓고 new 연산자를 사용한

자식에겐 공간안에 있는 값을 공유해준다.

생성자함수를 통하여 생성한 인스턴스들은 프로토타입이라는 속성을 상속받게된다.

 

 

작성법

 

반드시 this.을 사용해야한다.

대문자를 사용하여 만드는것이 관례 Apple, Orange

 

생성자함수를 사용하는 이유

    <script>
      /*
      키와 값이 중복되는 객체를 무수히 많이, 혹은 반복적으로 만들어낼때 n가지의 객체를 찍어내면 코드낭비가된다.
      이럴때 생성자 함수를 사용하여 껍데기를 만들어주고 새로는 객체에게 입혀준다.
      */
     
      let car01 = {
        이름: "미니",
        색상: "블루",
        휠색상: "블랙",
        바퀴: 4,
      };

      let car02 = {
        이름: "미니",
        색상: "레드",
        휠색상: "블랙",
        바퀴: 4,
      };
    </script>

---

 

function안에 있는 껍데기란 생성자 함수를 사용하여 대부분의 값은 동일하지만 몇가지의 옵션만 다른 값을

함수에 매개변수로 설정하여  new연산자를 사용하여 인스턴스를 생성한다.

 

 

 

새싹 DT 기업연계형 프론트엔드 실무 프로젝트 4주차 블로그 포스팅