객체지향 Javascript

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

*객체: 서로 연관 된 변수와 함수를 그룹핑하고 이름을 붙인 것

class

(ES5)클래스는 함수로 정의할 수 있습니다.

function Car (brand,name,color) {
  //instance가 만들어질 때 실행되는 코드
}

(ES6)에서는 class라는 키워드를 이용해서 정의할 수 있습니다.

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

class이름의 첫글자는 대문자로!
constructor? 인스턴스가 초기화될 때 실행하는 생성자 함수입니다.

instance

new키워드를 통해 클래스의 인스턴스를 만들어 낼 수 있다.

let avante = new Car('hyundai','avante','black');
let mini = new Car('bmw','mini','white');

각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다.

마찬가지로 우리가 배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일합니다.

let arr = new Array('code','states','pre')
arr.length; //3
arr.push;('course'); //새 element를 추가합니다.

속성과 메소드

객체지향 프로그래밍은 현실 세계를 기반으로 프로그래밍 모델을 만들 때 유용하다.
속성) brand name color
메소드) refuel() setSpeed() drive()
클래스에 속성과 메소드를 정의하고 인스턴스에서 이용한다.

과정

클래스: 메소드 정의
(ES5)

function Car (brand,name,color){/*생략*/}
Car.prototype.refuel = function(){
  //연료 공급을 구현하는 코드
}
Car.prototype.drive=function(){
  //운전을 구현하는 코드
}

*prototype? 모델의 청사진을 만들 때 쓰는 원형 객체입니다.

(ES6)

class Car(){
  constructor(brand,name,color){/*생략*/}
  refuel(){
  }
  drive(){
  }
}

인스턴스에서의 사용

let avante = new Car ('hyundai','avante','black');
avante:color;//'black'

정리

function Car(brand, name, color) { //🚩Car는 class
  this.brand = brand; //🚩this객체: 이 예제에서는 avante === this
  this.name = name;
  this.color = color;
} //🚩여기까지가 constructor 함수
Car.prototype.drive = function(){ //🚩prototype객체: 여기에 속성이나 메소드를 정의할 수 있음
  console.log(this.name + '가 운전을 시작합니다');
}

let avante = new Car ('hyundai', 'avante', 'black'); //🚩avante는 instance
avante.color; //'black'
avante.drive(); // 'avante가 운전을 시작합니다'

*this는 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context이다.
new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 된다.