Javascript # 객체지향

📝오늘 배운 내용

객체 지향 프로그래밍

객체 지향 프로그맹이란 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이라고 생각할 수 있다.

• 하나의 모델이 되는 청사진 => class
• 그 청사진을 바탕으로 한 객체 => instance

아래는 ES5에서 사용했던 방법과 새로 도입된 ES6로 사용하여 클래스를 만드는 방법이다.
여기서 보이는 함수는 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부른다.
생성자 함수는 return값을 만들지 않는다.

// ES5 
function Car(color) {
 // 인스턴스가 만들어질 때 실행되는 코드 
}

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

이때, 이 함수를 이용하는 방법은 new라는 키워드를 사용해서 만든다. new는 새로운 인스턴스를 만드는 방법이다. 아래는 모두 인스턴스들이다. 각각의 인스턴스는 Car라는 클래스의 고유한 속성과, 메소드를 갖는다.

let avante = new Car('blue');
let Porsche = new Car('white');
let Lamborghini = new Car('yellow');

그렇다면 클래스의 속성은 어떻게 정의하는 것일까.
객체지향 프로그래밍에서는 this라는 것이 있다. this는 인스턴스 객체를 의미한다. parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성시 지정하는 값이며, 아래와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여한다는 의미이다.

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
}

이번에는 클래스의 메소드를 정의해보자.
메소드는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의한다.
drive(), refuel()라는 부분을 뜻한다.

class Car {
  constructor(brand, name, color) {
    refuel() {
    }
    drive() {
    }
  }
}

이렇게 우리가 설정한 클래스의 속성과 메소드는 인스턴스에서 이렇게 사용할 수 있다.

let avante = new Car('hyundai', 'avante', 'white');
avante.color; // 'white'
avante.drive(); // 아반떼가 운전을 시작한다.

마지막으로 정리를 해보자면
Car라는 class를 생성하였고, 그 class의 속성에는 brand, name, color가 정의되어 있다.
그 아래에 drive라는 메소드도 정의되어 있는 걸 볼 수 있고, avante라는 인스턴스 하나를 생성하였다.
avante는 Car class의 속성과 메소드를 갖는다. 그리고 parameter로 들어온 'hyundai', 'avante', 'white'는 인스턴스 생성시 지정되는 값이다. this는 avante이므로, 지정되있는 parameter값이 출력되는 것이다.

class Car() { // Car는 class이다.
  constructor(brand, name, color) {
    this.brand = brand; // this는 아래 avante이다. avante === this
    this.name = name;
    this.color = color;
  }
  drive() { // drive메소드
  }
}

let avante = new Car('hyundai', 'avante', 'white'); // 인스턴스
avante.color; // 'white'
avante.drive(); // 'avante가 운전을 시작한다'