객체 지향 JavaScript (Class)

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

• ES5 클래스는 함수로 정의할 수 있다.

function Car (brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
  this.brand = brand;
  this.name = name;
  this.color = color;
} // => 클래스 속성의 정의

Car.prototype.refuel = function() {
 // 연료 공급을 구현하는 코드
}

Car.prototype.drive = function() {
 // 운전을 구현하는 코드
} // => 클래스 메소드의 정의

 

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

class Car {
  constructor(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
  this.brand = brand;
  this.name = name;
  this.color = color;
  } // => 클래스 속성의 정의
  refuel() { }
  drive() { } // => 클래스 메소드의 정의
}

 

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

let avante = new Car('hyundai', 'avante', 'blue');
let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('Volkswagen', 'beetles', 'red');
// 각각의 인스턴스는 Car 라는 클래스의 고유한 속성과 메소드를 갖는다.

 

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

• prototype : 모델의 청사진을 만들 때 쓰는 원형 객체

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

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

  new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값이 됨

• 배열에서 유사성을 발견할 수 있다.

let arr = new Array('code', 'states', 'pre');
// === let arr = ['code', 'states', 'pre']
arr.length; // 3
arr.push('course'); // 새 element 추가

 

 

총정리