(Javascript) Class

Class

• 코드의 중복성을 줄이면서 객체를 생성하는 틀,  template
• prototype 기반의 언어인 JS에서도 직관적으로 쉽게 코드를 읽고 만들어주고
  이전의 class 기반으로 개발했었던 개발자들도 쉽게 적응할 수 있도록 하기 위해 사용

class Block {
  constructor(_count) {
    this.count = _count;
  }
  consoleLog() {
    console.log("Block 의 " + this.count + "번째 입니다.");
  }
}
const block = new Block(1);
block.consoleLog();
console.log(block);

위 코드 실행 결과 창

• class Block{} : Block이라는 이름의 클래스를 선언
• constructor(_count ){} : _count라는 매개변수를 담은 생성자 객체를 생성
• this.count = _count;: 매개변수_count를 Block 클래스 내에 count 변수에 초기화
• consoleLog(){} : consoleLog라는 클래스 내 메서드 생성
• const block = new Block(1) : block 변수에 1이라는 값을 매개변수로 하는 Block 클래스로 초기화
• block.consoleLog() : 생성된 block의 consoleLog 메서드 호출
• console.log(block);  : block이라는 변수를 확인해 본다

 

function BlockFunc(_count) {
  this.count = _count;
}
BlockFunc.prototype.consoleLog = function () {
  console.log("Block 의 " + this.count + "번째 입니다.");
};
const blockfunc = new BlockFunc(2);
blockfunc.consoleLog();
console.log(blockfunc);

• function BlockFunc(count){} : 함수형으로 매개변수 _count를 사용하는 BlockFunc이라는 클래스를 선언한다.
• BlockFunc.prototype.consoleLog = function () {} : BlockFunc 클래스에 prototype이라는 객체에 consoleLog()라는 함수를 추가한다.
• const blockfunc = new BlockFunc(2); : blockfunc라는 변수에 BlockFunc() 클래스에 매개변수 2를 넣고 클래스를 새롭게 생성한다.
• blockfunc.consoleLog(); : blockfunc 클래스에 consoleLog() 메서드를 호출한다.
• console.log(blockfunc); : blockfunc를 콘솔로그를 찍는다.

 

class Block {
  constructor(_count) {
    this.count = _count;
  }
  consoleLog() {
    console.log("Block 의 " + this.count + "번째 입니다.");
  }
}

class Student extends Block {
  constructor(_name, _count) {
    super(_count);
    this.name = _name;
  }
  consoleLog() {
    console.log("이름은 " + this.name + "입니다.");
    super.consoleLog();
  }
}
const hkd = new Student("홍길동", 1);
hkd.consoleLog();
console.log(hkd);

block을 상속받은 student 클래스의 결과 창

• class Student extends Block {} : extends를 사용해서 Block를 상속받아 Student 클래스를 생성한다.
• constructor(_name, _count){} : Student 클래스를 _name, _count 매개변수를 받는 생성자를 생성한다.
• super(_count) : 부모의 생성자, 여기서는 Block의 생성자를 호출한다.
• this.name = _name; : name를 매개변수로 클래스에 name의 값으로 설정한다.
• consoleLog(){ super.consoleLog(); } : consoleLog() 메서드를 선언하고 그 안에 부모의 클래스 consoleLog()를 메서드를 호출한다.
• const hkd = new Student("홍길동", 1); : hkd 변수에 ‘홍길동’이라는 텍스트 name과 1이라는 count 값을 매개변수로 하는 student 클래스를 생성한다.