[Javascript] 클래스

클래스는 왜 사용하는걸까?

✔️ 동일한 종류의 객체를 여러 개 생성할 때 생성자 함수를 통해 편리하게 객체를 만들었다.

✔️ class 를 이용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서 쓸 수 있다.

✔️ 그 기능이 뭔데?

 

기본문법

✔️ new에 의해 constructor은 자동으로 실행된다.

✔️ constructor에서 객체를 초기화한다는게 이해가 잘 안됨.

class User {
  constructor(name){
    this.name = name;
  }
  
  sayHi(){
  	alert(this.name);
  }
}

let userJohn = new User('John');

 

클래스 표현식

✔️ 정의, 전달, 반환, 할당

//클래스 표현식
let User = class {
  sayHi(){
    console.log('hi');
  }
}

 

클래스에서 getter와 setter 사용하기

✔️ get과 set을 이용해 프로퍼티를 조작할 수 있다.

class User{
  constructor(name){
    this.name =name;
  }
  get name(){
  	return this._name;
  }
  set name(value){
  	if(value.length < 4){
      alert('너무 짧다');
      return;
    }
    this._name = value;
  }
}

let user = new User('보라');
alert(user.name); 보라

user = new User(""); //너무 짧다

 

Clock class 함수로 코드짜기. 다시공부

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();

 

Reference

• https://ko.javascript.info/class