[230315] JS와 객체지향 프로그래밍 : 클래스와 인스턴스

---

🍀 오늘의 날짜 : 23년 03월 15일 
🍀 오늘의 주제 : 클래스와 인스턴스 

---

OOP : Object Oriented Programming - 객체 지향 프로그래밍 

 

 

🔖JS에서 클래스와 인스턴스

# CLASS  : 주요 도면(청사진) 

# INSTANCE : 도면( class ) 를 바탕으로 다양한 객체를 만드는 프로그래밍 패턴

# constructor : class로 생성된 객체를 생성하고 초기하기 위한 특수한 메서드

                        * class 안에 한 개만 존재

# 프로토타입 : 객체를 상속하기 위해 사용. 

  **CLASS - 일반 함수와 구분하기 위해 ' 대문자 ' 로 시작.

 

  //class [1]

  function Car( color ) { brand, name, color };

 

  //class [2] - ES6

  class Car {

     constructor( brand, name, color ){

     }

  }

 

  **instance

  let Volvo = new Car( ' Volvo', ' GV80 ', ' black ' );

  let sonata = new Car( ' Hyundai', ' sonata ', ' white');

  let bentley = new Car( ' Bentley', ' Bently Flying spur ', ' mint ' );

  bentley.name;  // 'Bently Flying spur'

  bently.drive( );  //벤틀리가 주행을 시작합니다. 

 

 

 

** Class는 호이스팅 불가합니다. 반드시 Class 정의 후 사용 가능하니 주의하자요.

 

 

 

# this를 통해 파라미터(매개변수)로 넘어온 값들을 각 인스턴스 객체에 할당되어집니다.

 

  // ES5

  function Car (brand, name, color){

      this.brand = brand;

      this.name = name;

      this.color = color;

  }

  // ES6

  class Car {

      constructor(brand, name, color){

         this.brand = brand;

         this.name = name;

         this.color = color;

      }

  }

 

 

 

 

# Class에서 메소드를 정의 할 때, 기존의 ES5에서는 ' prototype '을 사용해야 했습니다. 

 

// ES5

  function Car(brand, name, color) {/*생략*/}

  Car.prototype.stop = function () {};

  Car.prototype.drive = function () {};

  // ES6

  class Car {

  constructor(brand, name, color) {/*생략*/}

     stop() {} 

     drive() {}

  }

➡️ 참고01 : MDN_Classes

➡️ 참고02 : MDN_this

➡️ 참고03 : MDN_Prototype

 

 

 

 

🔖 Array.prototype.메서드 이름() 

메소드들이 Class의 prototype(프로토타입 ;원형 객체)에 정의되어 있기 때문. 

 

 

오랜만에 객체지향 CLASS 보니까 햇깔리네용. JAVA도 다시 공부해야 하는딩... ㅠ 

 

---

🌱 추가 공부 필요 내역                                           

🔹

🔹

 

🌱 도움이 될 만한 사이트 추천                    

🔹

🔹

 

🌱  관련 정보 정리 글                                   

🔹

🔹