🚩 객체지향 (Object oriented JS)

하나의 모델이 되는 청사진(blueprint> class)을 만들고 그 청사진을 바탕으로 한 객체(Object> instance(단순한 뜻은 예, 사례, 경우):그냥 객체와 구분하기 위한 것, 청사진에 기반한 객체)를 만드는 프로그래밍 패턴

function Car(color){} ; // class
let avante = new Car('blue');
let mini = new Car('cyan');
let beetles = new Car('red'); // instances (new키워드 사용) 

🔷 클래스의 경우 첫 글자를 대문자로 해주어야 한다!
(ES5) 클래스는 함수로 정의할 수 있다.

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

(ES6) class라는 키워드를 이용해서 정의할 수도 있다. (constructor 필요)

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

🔷 new키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.
함수 실행을 할때 '함수이름()' 이런 방식을 사용했는데, 이 경우 Car를 통해서 인스턴스를 만들어낼 때 new라는 키워드를 쓴다.

// 클래스
function Car(brand, model, color){
  }

// new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다 
// 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다 
let avante = new Car('hyundai', 'avante', 'black'); 
let beetles = new Car('volkswagen', 'beetles', 'red');
avante; //Car{} > avante는 Car라는 클래스의 인스턴스다 

---

🔔 속성과 메소드

🔷 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.

객체지향 프로그래밍 자바스크립트를 사용하는 이유는, 현실 세계에 있는 내용을 코드로 옮기고 싶을 때 즉, 프로그래밍 모델로 만들고 싶을 때 많이 사용한다. Car라는 클래스에 brand, name, color, maxSpeed와 같은 현재 속성이 있다. 메소드는 Car라는 클래스를 통해서 하고자하는 액션(실행하는 함수)을 말한다. 현재 Car가 가진 속성이나 할 수 있는 일들에 대해서 클래스에 정의해준다. Car라는 클래스에 brand, name, color, currentFue1, maxSpeed와 같은 것을 지정해줄 수 없다. Car에는 현재의 인스턴스에 대해서만 정의할 수 있고 사용은 인스턴스에서 한다.

속성	메소드
brand, name, color, currentFue1, maxSpeed	refuel(), setSpeed(), drive()

🔷 클래스: 속성의 정의

// 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;
  }
}

// 실제 적용 사례 
function Car(brand, model, color){
  this.brand = brand;
  this.model = model; 
  this.color = color;
}
let avante = new Car('hyundai', 'avante', 'black')
// 여기서의 this는 avante 
avante.brand;// 'hyundai' 
avante.color; // 'black' 

// 새로운 인스턴스 추가 
let mini = new Car('bmw', 'mini', 'red')
// 여기서의 this는 mini 
mini.color; // 'red' 

// mini나 avante나 동일한 Car가 가진 성격들을 가지고 있지만(color) 
// 그 성격의 값은 각각 다르다 (그것을 활용하는 키워드가 this이다) 

🔷 클래스: 메소드의 정의

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

Car.prototype.drive = function(){
  // 운전을 구현하는 코드
} 

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

🔷 인스턴스에서의 사용

// 실제 적용 사례 
Car.prototype.drive = function(){
  console.log(this.model + 'gogogogo!');
}
mini.drive(); //minigogogogo! 

let mini = new Car('bmw', 'mini', 'white'); 
 //new키워드로 Car의 새 인스턴스 만든다
mini.brand; //'bmw'
mini.drive(); // mini가 운전을 시작한다 (메소드 실행) 

---

🔔 Prototype / Constructor / this

🔷 prototype

모델의 청사진을 만들 때 쓰는 원형 객체(original form)

🔷 constructor

인스턴스가 초기화될 때 실행하는 생성자 함수

🔷 this

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

---

🔔 배열과 객체지향의 유사성

let arr = ['bmw', 'mini', 'black']   
// arr은 instance, class는 대문자 Array 
arr.length; // 3
arr.push('easytodrive'); // 새 element추가  

// 위의 것과 똑같다 (배열을 정의하는 것은 Array의 인스턴스를 만들어내는 것과 동일) 
let arr = new Array('bmw', 'mini', 'black');