객체 지향 프로그래밍 (new, this, class, instance)

 

<객체 지향 프로그래밍>

하나의 모델이 되는 blueprint를 class로 만들고 이를 바탕으로 한 instance object(이하 instance)를 만드는 프로그래밍 패턴.

 

class

blueprint를 만드는 템플릿.

일반적인 함수는 적절한 동사를 포함하고 소문자로 시작하지만 class는 보통 대문자로 시작하며 일반명사로 만듭니다.

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

class Car {
constructor (brand,name,color){instance가 만들어질 때 실행되는 코드}
// ES6 문법 (더 많이 사용)

함수처럼 선언식, 표현식 둘다 가능합니다.

class Rectangle { 
constructor(height, width) {
this.height = height;
this.width = width;
	}
} // 클래스 선언식

let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}; // 클래스 표현식

 

✓ class의 호이스팅

함수의 경우 정의하기 하기 전에 호출할 수 있지만 클래스는 반드시 정의한 뒤에 사용할 수 있습니다.

const p = new Rectangle(); // ReferenceError
class Rectangle {}

 

✓ ES5에서 Method를 정의할 때는, "Prototype"

ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있습니다.Car 클래스에 메서드를 추가하려면, Car.prototype.메서드명 이렇게 사용합니다.

function Car (brand, name, color) { 코드 }
Car.prototype.refuel = function () { refue1 함수를 호출하면 나올 코드 } 

class Car {
constructor (brand,name,color){ 코드 }
refuel(){ refue1 함수를 호출하면 나올 코드 }
}

constructor

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

다른 모든 메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화할 때 수행할 초기화 코드를 정의합니다.

class Polygon {
  constructor() {
    this.name = 'Polygon';
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

new 키워드

instance를 만들 때는 new 를 사용합니다. 즉시 생성자 함수가 실행되고,

변수에 클래스의 설계를 가진 새로운 instance가 할당됩니다.

let avante = new Car (‘blue’)
let mini = new Car (‘cyan’)
let beetles = new Car (‘red’) // 각 instance는 Car이라는 클래스의 고유한 속성과 메소드를 가짐

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

let mini = new Car (‘bmw’, ‘mini, ‘white’')
Mini.brand; // ‘bmw’
Mini.refuel{}; // ‘mini에 연료를 공급합니다'

 

instance

instance는 blueprint를 바탕으로 한 object를 만듭니다.

각각의 instance는 클래스의 고유한 속성과 메서드를 갖게 됩니다.

function Car (brand, name, color){ // class === Car
this.brand = brand;	// 이 예제의 this === avante
This.name = name;
This.color = color;
}	// constructor 함수


Car.prototype.drive = () => console.log(this.name + '가 운전을 시작합니다’); // prototype 객체 

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

this

함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context (excution context).

new 키워드로 instance를 생성했을 때에는 해당 instance가 바로 this의 값이 됩니다.

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