[Javascript] 객체지향 프로그래밍-클래스와 인스턴스

이성은·2022년 11월 18일
0

객체지향 프로그래밍

  • 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고 => class
    그 청사진을 바탕으로 한 객체를 만드는 => instance
    프로그래밍 패턴이다.

클래스와 인스턴스

  • 객체는 일반적인 함수를 정의하듯이 만들고, 이때 함수를 이용하는 방법은 new키원드를 써서 만든다. 이는 새로운 인스턴스를 만드는 방법이다.

  • 인스턴스를 만들 떄에는 new키워드 사용
    즉시 생성자 함수가 실행되고, 변수에 클래스의 설게를 가진 새로운객체, 인스턴스가 할당
    각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

//<클래스는 함수로 정의할수 있다.>
  fuction Car(brand, name, color){
    //인스턴스가 만들어질 때 실행되는 코드
  }

//< class라는 키워드를 이용해서 정의할수도 있다.>
class Car{
  constructor(brand, name, color){
    //인스턴스가 만들어질 때 실행되는 코드
  }
}

//new 키워드를 통해 클래스의 인스턴스 만듬
let avante = new Car('hyundai', 'avante', 'black')
let mini =  new Car('bmw', 'muni', 'whire')
//각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다
  • 속성과 메소드
    클래스에 속성과 매소드(객체에 딸린 함수)를 정의하고, 인스턴스에서 이용
//클래스 : 속성의 정의
//<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;
  }
}
//클래스 : 메서드 정의 ,prototype이라는 키워드를 사용해야 메서드를 정의할 수 있다.
//생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.refuel() {}, drive() {}와 같이 작성되어 있는 부분
//<ES5>
function Car (brand, name, color){
    this.brand = brand ;
    this.name = name;
    this.color = color;
  }
Car.prototype.refuel = function(){
  //연료 공급을 구현하는 코드
}
Car.prototype.drive = function(){
  //운전을 구현하는 코드
}

//<ES6>
class Car {
  constructor(brand, name, color){
    this.brand = brand ;
    this.name = name;
    this.color = color;
  }
  refuel(){//연료 공급을 구현하는 코드
  }
  drive(){ //운전을 구현하는 코드
  }
}
  • this : 함수가 실행될때, 해당 스코프마다 생성되는 고유한 실행 context,new키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 된다.
  • prototype : 모델의 청사진을 만들 때 쓰는 원형 객체
  • constructor :인스턴스가 초기화될때 실행하는 생성자 함수
profile
함께 일하는 프론트엔드 개발자 이성은입니다🐥

0개의 댓글