Frontend

Class 클래스 예시

두바이유 2022. 7. 6. 19:49

객체(인스턴스)란?

상태데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조.

이때 객체의 상태 데이터를 Property, 동작을 method라 부른다.

 

클래스 기본

class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }
  sayHi(){
    console.log('안녕 나는 할아버지')
  }
}

class 아버지 extends 할아버지{
  constructor(name){
    super(name);//constructor안에쓰면 super는 부모클래스의 constructor를 가르킴
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi();//prototype 함수안에쓰면 super는 부모클래스의 prototype
  }
}

var a = new 아버지('만수');

a.sayHi2()를 출력하면?

a.나이는?

 

getter setter

할때마다 a.나이 할수는 없으니

자료를 꺼내는 세련된방법 나아가서 object 자료가 복잡할때 꼭 필요함

 

나중에 object자료를 수정할때 실수를 방지하고 결과를 직관적으로 확인할 수있어서 유용하다.

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){//내년나이
    return this.age + 1
  }
  set setAge(나이){
    this.age = parseInt(나이);
  }
}

var 사람1 = new 사람();
사람1.nextAge //21
사람1.setAge = 2 //2살로 변경됨

set 붙은 함수들은 setter라고 부릅니다. (데이터를 set 하는 (수정하는) 함수라는 뜻)

get, set 앞에 안붙이면 항상 함수()로 소괄호까지 출력해야하고 직관적이지않음

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  nextAge(){//내년나이
    return this.age + 1
  }
  setAge(나이){
    this.age = parseInt(나이);
  }
}

var 사람1 = new 사람();

사람1.nextAge()
사람1.setAge('2')

 

클래스 퍼포먼스 향상

만약 사람1뿐만아니라 여러 사람 객체를 찍어낸다고 가정하면 모든 인스턴스가 동일한 nextAge(), setAge()메서드를 중복 소유하게된다. 이는 메모리를 불필요하게 낭비하는것으로 프로토타입기반으로 상속을 구현하게해야 메모리낭비를 최소화할 수 있다.

 

class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }

}

 사람.prototype.nextAge = () => {//내년나이
    return this.age + 1
  }
 사람.prototype.setAge = (나이) => {
    this.age = parseInt(나이);
  }

var 사람1 = new 사람();

사람1.nextAge()
사람1.setAge('2')

 

반응형