JavaScript - Class

객체 지향 프로그래밍

하나의 모델이 되는 청사진(Class)을 만들고 그 청사진을 바탕으로 한 객체(instancse)를 생성하는 프로그래밍 패턴입니다.

클래스 정의

// 첫 글자는 대문자로 합니다. 
//ES5. 함수로 정의 합니다.
function Monitor(brand, display, size){
//인스턴스가 만들어 질때 실행되는 코드
}

//ES6. class 라는 키워드를 이용해서 정의 할 수도 있습니다.
class Monitor{
	constructor(brand, display, size){
    //인스턴스가 만들어 질때 실행되는 코드
   }
}

인스턴스 생성

let pd1 = new Monitor('samsung','QHD','32');
let pd2 = new Monitor('lg','FHD','27');

pd1 과 pd2는 인스턴스이고 각각의 인스턴스는 Monitor라는 클래스의 고유한 속성과 메소드를 갖습니다.

클래스: 속성의 정의

//ES5
function Monitor(brand, display, size){
//인스턴스가 만들어 질때 실행되는 코드
//constructor(생성자) 함수
  this.brand = brand;
  this.display = display;
  this.size = size;
}

//ES6
class Monitor{
  constructor(brand, display, size){
  //인스턴스가 만들어 질때 실행되는 코드
  //constructor(생성자) 함수
    this.brand = brand;
    this.display = display;
    this.size = size;
  }
}

클래스: 메소드의 정의

//ES5
function Monitor(brand, display, size){/*생략*/}

Monitor.prototype.drive = function(){
  console.log(this.brand +'이(가) 출발 합니다.');
}
/*
ƒ (){
  console.log(this.brand +'이(가) 출발 합니다.');
}
*/

//ES6
class Monitor{
  constructor(brand, display, size){/*생략*/}
  drive(){
  }
}

인스턴스에서의 사용

let pd3 = new Monitor('hansung','UHD','32');
pd3.brand; // "hansung"
pd3.drive();//hansung이(가) 출발 합니다.

단어 설명

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

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

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