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')
반응형