출처 : 유튜브 드림코딩 자바스크립트
Counter 라는 class 내에는 counter 라는 변수가 있는데 0부터 시작한다.
이 class는 object를 만드는 순간 0으로 초기가 된다.
class 내의 함수 선언할때는 function 안적어줘도 됌
class Counter {
constructor(){
this.counter = 0;
}
increase(runIf5Times){
this.counter++;
console.log(this.counter);
if(this.counter % 5 ===0){
runIf5Times(this.counter);
}
}}
const coolCounter = new Counter(); //object 생성
function printSomething(num){
console.log(`yo! ${num}`)
}
function alertNum(num){
alert(`Wow! ${num}`)
}
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(alertNum);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
coolCounter.increase(printSomething);
callback 함수를 줌으로써 collCounter 사용자가 원하는 기능의 다양한 형태의 콜백함수 이용할 수 있음
문제점 : increase함수를 실행시킬 때마다 콜백함수를 호출해야하니 불편함 => 함수를 실행시킬때마다 일일히 콜백함수 실행시키는 것이 아니라 counstructor 내에서 콜백함수를 받는다.
constructure 에서 callback 함수 받기
class 를 완전체로 만들기 보다는 재조립이 가능한 형태로 만드는 것이 좋다!
class Counter {
constructor(runEveryFiveTimes){
this.counter = 0;
this.callback = runEveryFiveTimes; //함수의 인자로 받아온 아이들을
//class 자체에서 기억하기 위해
}
increase(){
this.counter++;
console.log(this.counter);
if(this.counter % 5 ===0){
this.callback && this.callback(this.counter) //if문을
적어줌으로써 counter 내에 콜백함수가 인자로 들어가지 않더라도 오류가
뜨지 않는다.
}
}}
function printSomething(num){
console.log(`yo! ${num}`)
}
function alertNum(num){
alert(`Wow! ${num}`)
}
const printCounter = new Counter(printSomething); //하나의 class 로
다양한 object 만들 수 있다.
const alertCounter = new Counter(alertNum);
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
alertCounter.increase();