본문 바로가기
JavaScript

JavaScript 클래스와 인스턴스

by 이히힣 2022. 7. 22.

[객체지향 프로그래밍]

 

하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴을 말한다.

 

 

 

 

 

[클래스(class)]

 

하나의 모델이 되는 청사진(blueprint)

일반적인 함수와 구분하기 위해 보통 대문자로 시작한다.

 

class Car {
  constructor (brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  
  //메소드(기능)
  drive() {
    console.log (this.name + '가 운전을 합니다');
  }
}

 

 

 

[인스턴스(Instance)]

 

청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴.

 

let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
 // 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다.

 

생성자 함수 new 연산자를 이용해 객체타입의 인스턴스를 생성한다.

생성자 함수는 new 키워드를 사용하지 않으면 일반적인 함수와 동일하게 동작하며 새로운 객체를 반환하지 않는다.

각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.

 

 

 

ES5) 함수로 정의

 

class Car {
  constructor (brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  
  //메소드(기능)
  drive() {
    console.log (this.name + '가 운전을 합니다');
  }
}

 

 

 

ES6) class를 이용해 정의할 수 있음

 

class Car{
 constructor(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
 }
}

 

최근에는 ES6를 주로 사용한다.

객체지향 프로그래밍에서 생성자(constructor) 함수라고 한다. 생성자 함수는 return값을 만들지 않는다.

 

 

 

⭐️Array는 클래스.배열은 Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드가 있습니다.

'JavaScript' 카테고리의 다른 글

JavaScript 프로토타입  (0) 2022.07.23
JavaScript 객체 지향 프로그래밍  (0) 2022.07.22
일급객체/고차함수  (0) 2022.07.21
JavaScript 스코프(scope)  (0) 2022.07.21
JavaScript 객체  (0) 2022.07.21