class TIL(25)

오늘은 어제에 이어서 class에 대해서 정리하려고한다.

 

1.class

<기본구조>
class People{
 constructor(name,age){
 this.name= name;
 this.age= age;
}
 //함수는 function이라고 적지 않아도된다.그리고 보통 constructor 안보다 밖에 위치한다.
 display()=>{`${this.name},${this.age}`}
}

const person = new People('puth', 30);
console.log(person)

여기서 class는 템플릿이라고 생각하면 되고 new를 붙여서 그 템플릿을 가지는 새로운 객체를 생성해낼 수 있다.

 

만약 누군가가 new로 새로운 객체를 만들고 나서 이 상태를 변경하고 싶지 않도록 만들려면 #을 붙이면된다.

 

 

const person = new People('puth',30);
person.#name = 'charlie'

console.log(person);

이런식으로 누군가가 미리 정해놓은 이름인 puth를 charlie로 바꾸려고 하면 클래스 밖에선 수정할 수 없다고 콘솔이 뜬다.(오류발생)

즉 # 을 붙여놓으면 클래스 내에서는 수정이 가능하지만 밖에서는 불가능하다.

 

---

 

2.get,set

첫번째의 코드를 예시로 들겠다.

class People{
 constructor(name,age){
 this.name= name;
 this.age= age;
}
 display()=>{`${this.name},${this.age}`}
}

const person = new People('puth', 30);
console.log(person)

여기서 display는 person.display()로 호출이 가능하다.

호출을 해보자면👇🏻

console.log(person.name);

console.log(person.age);

console.log(person.display()); 

 

①여기서 함수를 프로퍼티처럼 부르고 싶다면 간단하다. display함수 앞에 get이라고 써주고 console.log(person.display)가 가능하다.

 

②set을 붙인 함수를 만든다.

set display(value){
	console.log(value)
}

=>  호출은  person.display = 'charlie puth'라고 한다면  콘솔에는 charlie puth라고 나오는 것을 볼 수 있다.

---

3.확장자(extends)

 만약 두 클래스가 동일한 함수와 프로퍼티를 가지고 있다면 굳이 두번을 쓸 필요없이 공통적인 템플릿? 함수를 만들어주고

그 함수를 당겨쓰는것이 더 효율적일것이다.

class Dog(){
	constructor(color){
    this.color= color;
    }
    eat(){
         console.log('먹자')
     }
     sleep(){
         console.log('잔다')
     }
}

class Cat(){
	constructor(color){
    this.color=color;
    }
    eat(){
         console.log('먹자')
     }
     sleep(){
         console.log('잔다')
     }
}
//이 동일한부분을 하나로 만들어주자!↓

class Animal{
    constructor(color){
        this.color= color
    }
    eat(){
        console.log('먹자')
    }
    sleep(){
        console.log('잔다')
    }
}

이렇게 하나로 만들어서 필요할때만 부를 수 있는 class를 만들었다.

 

호출할때는 간단하다.

class Dog extends Animal {}   //Animal 함수를 Dog에 확장하겠따

const dog = new Dog('white');

console.log(dog);   //  Dog { color: 'white' }

dog.eat() ; //  먹자

 

이렇게 나오는 것을 확인 할 수 있다.

 

❗️여기서 

만약 확장된 함수에서 더 추가하고 싶은 함수가 있다면 추가 할 수 있다.

class Cat extends Animal{

    constructor(color,cute){     // 인자에 기존인자,추가할 인자를 적어주면 된다.

           super(color);         //기존의 color(부모로부터)를 받아야하므로 꼭 적어줘야 한다.

           this.cute=cute;

      }

  play(){

      console.log('놀자')}

 eat(){

   super.eat();   // 이렇게 해놓으면 기존의 부모로 부터 받은 함수를 실행하고 

  console.log('고양이가 밥을 먹네')}      //다음줄에 실행한다.

 }

const cat = new Cat('grey','냥냥이');
console.log(cat);
cat.eat();
cat.play();

이렇게 cat으로 변수를 지정해주고 호출이 가능하다.

즉, 내가 필요한 부분이 있다면 기존의 것을 super로 부른다음 내가 추가할 부분을 넣어주면 된다.

기존 인자는 항상 가지고 있어야한다는 점 기억

constructor, 함수 어디에서나 super로 부모에서부터 상속받을 수 있다.

끝😎