-
클래스, 함수 변경해보기Study/JavaScript 2020. 6. 7. 22:46
함수 스타일로 작성된 Clock 클래스를 ‘클래스’ 문법으로 다시 써봅시다.
<!doctype html> <script> function Clock({ template }) { let timer; function render() { let date = new Date(); let hours = date.getHours(); if (hours < 10) hours = '0' + hours; let mins = date.getMinutes(); if (mins < 10) mins = '0' + mins; let secs = date.getSeconds(); if (secs < 10) secs = '0' + secs; let output = template .replace('h', hours) .replace('m', mins) .replace('s', secs); console.log(output); } this.stop = function() { clearInterval(timer); }; this.start = function() { render(); timer = setInterval(render, 1000); }; } let clock = new Clock({template: 'h:m:s'}); clock.start(); </script> </html>class Clock { constructor({ template }) { this.template = template; } render() { let date = new Date(); let hours = date.getHours(); if (hours < 10) hours = '0' + hours; let mins = date.getMinutes(); if (mins < 10) mins = '0' + mins; let secs = date.getSeconds(); if (secs < 10) secs = '0' + secs; let output = this.template .replace('h', hours) .replace('m', mins) .replace('s', secs); console.log(output); } stop() { clearInterval(this.timer); } start() { this.render(); this.timer = setInterval(() => this.render(), 1000); } } let clock = new Clock({template: 'h:m:s'}); clock.start();'Study > JavaScript' 카테고리의 다른 글
createElement() (0) 2020.06.08 정적 메서드와 정적 프로퍼티 (0) 2020.06.08 클래스와 기본 문법 (0) 2020.06.07 옵셔널 체이닝 '?.' (0) 2020.06.03 'new' 연산자와 생성자 함수 (0) 2020.06.03