JavaScript #12

객체 지향 프로그래밍

Object Oriented Programming

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

• 청사진 = 클래스(class)
• 청사진을 바탕으로 한 객체
  = 인스턴스 객체(instance object)
  = 줄여서 인스턴스(instance)

JavaScript에는 "객체"라는 개념이 이미 있음
= 용어를 잘 구분하는 것이 중요

---

클래스와 인스턴스

만드는 방법

일반적인 함수를 만들 때와 비슷하다

클래스 (ES5)

function Car (color) { }

클래스 (ES6)

class로 만들 수도 있다

class Car {
  constructor(...args) {
  // 만들어질 때 실행되는 부분
  }
}

• 대문자, 일반명사를 사용 (암묵적인 규칙)

인스턴스

let mini = new Car('cyan')

• 앞에 new를 붙여서 만든다

---

속성과 메소드

속성 : 클래스에 포함되는 변수
메소드 : 클래스에 포함되는 함수

만드는 방법

(ES5)
function Car (brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;  // 속성
}

Car.prototype.refuel = function() {
...
}  // 메소드

(ES6)
class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }  // 속성
  
  refuel() {
  ...
  }  // 메소드
} 

• this?
  = 인스턴스 객체
  = 만들어진 인스턴스에 해당 인자를 넣겠다

인스턴스에서 사용

let mini = new Car('bmw', 'mini', 'white');
mini.brand;  // 'bmw'
mini.refuel()  // 연료가 공급되는 메소드 실행

---

실전 예시 - 배열

지금까지 만들었던 배열은 모두 Array의 인스턴스

let arr = [1, 2, 3];
arr.length;  // 3, arr의 length 속성
arr.push(4);  // arr에 4를 추가하는 메소드

다음 두 줄은 같은 배열을 만든다

let arr = [1, 2, 3];
let arr = new Array(1, 2, 3);

mdn 문서도 Array.prototype.메소드명으로 안내
ex) Array.prototype.push()