🌎 클래스와 인스턴스

7/22 오전에는 클래스와 인스턴스에 대해서 학습했다!

💡 객체지향 프로그래밍

객체지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 여기서 청사진은 클래스 , 청사진을 바탕으로 한 객체는 인스턴스라고 생각하면 된다.

객체지향 프로그래밍 Object-Oriented Programming(OOP)

프로그램은 모두 객체로 만들어져 있고 객체들 간의 메세지를 주고받는 상호작용으로 이루어진다.

📌 클래스

function Car(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
}
// ES5  class는 함수로 정의 할수 있었다

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

클래스를 만들때는 다른 함수와 구분하기 위해 보통 대문자로 시작하고 일반 명사로 만든다.
constructor는 인스턴스가 초기화가 될때 실행하는 생성자함수 이다.
생성자 함수 (constructor)는 리턴 값을 만들지 않는다.

📌 인스턴스

// new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다
let avante = new Car('hyundai', 'avante', 'black');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('vw', 'beetles', 'red');

인스턴스는 new 키워드를 사용해 만들면 즉시 생성자 함수가 실행되어 변수에 클래스의 설계를 가진 새로운 객체 인스턴스가 할당된다.

✔ this

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

this는 인스턴스 객체를 의미하며 Parameter로 넘어온 인자들을 인스턴스 생성시 지정하는 값이다. new 키워드로 인스턴스를 생성했을 시에는 해당 인스턴스가 this값으로 된다.

this
함수가 실행될 때, 해당 스코프 마다 생성되는 고유한 실행 context(execution context)

function User(name) {
  this.name = name
}
User.prototype.normal = function () {
  console.log(this.name)
}
User.prototype.arrow = () => {
  console.log(this.name)
}

const waymo = new User ('Waymo')

waymo.normal() // waymo
waymo.arrow() // undefined

• 일반 함수는 호출 위치에 따라 this 정의
• 화살표 함수는 자신이 선언된 함수 범위에서 this 정의

🛠 메서드

//ES5

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

// ES6

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

ES5의 경우에는 prototype 키워드를 사용해 메서드를 정의할 수 있다. ES6에는 좀 더 쉽게 생성자 함수와 함께 클래스 안쪽에 묶어서 작성할 수 있다.

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // black
avante.drive(); // 아반떼 운전 시작

let mini = new Car('bmw', 'mini', 'white');
mini.brand; // bmw
mini.refuel; // 미니에 연료공급