자바스크립트(7) 객체지향 프로그래밍(OOP) 맛보기

이종호·2022년 5월 25일

자바스크립트

JavaScript

목록 보기

8/11

객체지향 프로그래밍이란?

야스오가 있다.
또 야스오를 물려받아 어둠의 인도자 야스오가 있다.
야스오의 스킨은 어둠의 야스오 말고도 여러가지가 있는데,

만약 이를 프로그래밍 한다고 하면
야스오라는 챔피언을 만들고 그 이후 출시하기 위해
새로운 야스오를 선언하고 안에 스킬이펙트등을 조정할것이다.

만약 각 스킨별로 야스오를 새롭게 만든다면 상당한 수고가 들것이고, 그 스킨만 발생하는 버그가 있을것이다.
이를 줄여주고 편리하게 야스오의 틀에서 벗어나지 않도록
하는 패턴이 객체지향 프로그래밍이다.

클래스와 인스턴스

이렇게 되면 원본야스오는 어떻게 부를까?
클래스 라고 부른다.

class 야스오 {
	contructor(스킨이름,색상){
    	this.스킨이름 = 스킨이름;
      	this.색상 = 색상;
    }
  	찌르기 () {
      console.log(`${this.색상}으로 바뀜`)
   	}
  	장막 () {
      console.log(`${this.색상}으로 바뀜`)
    }
  	돌진 () {
      console.log(`${this.색상}으로 바뀜`)
    }
}

let 어둠의인도자야스오 = new 야스오("어둠의인도자야스오","주황");

대략적으로 코드로 표현하면 이렇다.

코드 그대로 class로 야스오라는 설계도를 만들고,
어둠의인도자야스오를 만들기위해 선언 후 new 야스오를 만들어냈다.

이 결과 어둠의인도자야스오는 인스턴스 라고 부른다.
만약 또 스킨을 만들고자하면,

let 하이눈야스오 = new 야스오("하이눈야스오");

야스오라는 클래스를 만듦으로써 스킨을 만들기위한 인스턴스를 찍어낼수 있게되었다.

생성자와 new

코드를 보면 class내부에 constructor와 추후 인스턴스를 만들기 위해 new를 선언한것이 보일것이다.

생성자(constructor)는 new를 선언하고 인스턴스가 생성되면 바로 실행되는 함수이다.

속성(property)와 메서드

class 야스오 {
	contructor(스킨이름,색상){
    	this.스킨이름 = 스킨이름;
      	this.색상 = 색상;
    }
  	찌르기 () {
      console.log(`${this.색상}으로 바뀜`)
   	}
  	장막 () {
      console.log(`${this.색상}으로 바뀜`)
    }
  	돌진 () {
      console.log(`${this.색상}으로 바뀜`)
    }
}

let 어둠의인도자야스오 = new 야스오("어둠의인도자야스오","주황");

다시 코드를 보면 생성자에서 함수 인자를 만들고 이를 내부에 this.스킨이름 = 스킨이름;이렇게 선언했다.
여기서 this.스킨이름은 추후 만들어질 인스터스의 속성을 칭하고, 스킨이름은 인자를 불러와서 값으로 사용한것이다.

메서드는 어떤것일까?
어둠의인도자야스오는 색상변경을 하지만 스킬자체의 매커니즘은 동일하다. 하지만 스킬의 이펙트변화는 스킨별로 다르다.
일단 새로운 인스턴스(어둠야스오)에도 동일한 스킬을 부여한다. 이를 메서드라고 한다.

ES5에서의 클래스 선언 차이

지금까지 쓴 코드는 사실 es6에서부터 사용할수 있는 코드다.
ES5 버전으로 코드를 변경해보면

function 야스오(스킨이름,색상) {
    this.스킨이름 = 스킨이름;
    this.색상 = 색상;
}
야스오.prototype.찌르기 = function () {
      console.log(`${this.색상}으로 바뀜`)
}
야스오.prototype.장막 = function () {
      console.log(`${this.색상}으로 바뀜`)
}
야스오.prototype.돌진 = function () {
      console.log(`${this.색상}으로 바뀜`)
}

var 어둠의인도자야스오 = new 야스오("어둠의인도자야스오","주황");