객체지향 JavaScript

객체지향 JavaScript 란 ?

• 실제에 존재하는 모델을 만들기 위한 프로그래밍 패러다임

• 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있음

 

용어

class		// : 객체의 특성을 정의

instance	// : class 바탕으로 한 객체를 만드는 프로그래밍 패턴

prototype	// : 모델의 class 만들 때 쓰는 원형 객체

constructor	// : 인스턴스화 되는 시점에서 호출되는 메서드

this		// : 값은 함수를 호출한 방법에 의해 결정

new		// : 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성

 

ES5 class는 함수로 정의할 수 있음

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

ES6에서는 class라는 키워드를 이용해서 정의할 수도 있음

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

new 키워드를 통해 class의 instance를 만들어 낼 수 있음

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

 

속성과 메소드

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

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

     자료출처 : 코드스테이츠

 

객체지향 프로그래밍은, 현실 세계를 기반으로 프로그래밍 모델을 만들 때에 유용

 

클래스 : 속성의 정의

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

 

클래스 : 메소드의 정의

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

 

인스턴스에서의 사용

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

 

 

참조 사이트 : MDN new

new operator

참조 사이트 : MDN this

 

this

참조 사이트 : MDN 객체지향

 

객체지향 자바스크립트 개요