TIL: 2022-09-22

⚙️ 오늘 배운 주제

객체 지향 프로그래밍

 

🐹 오늘의 기분

오전에는 어제부터 이어졌던 블로깅 과제를 마저 하고 오후에는 페어분과 새로운 과제를 해결했다. 생각보다 빨리 끝나서 이런저런 이야기도 나눴다. 재밌었다! 혼자 하는 것보다 배우는 게 훨씬 많았다. 어제는 프로토타입을 완전히 이해 못하고 있었는데 오늘 아침에 블로깅 과제를 하면서 뭔가 좀 틀이 잡힌 느낌이었다. 여러 자료를 찾아보고 예시 코드도 직접 작성해보는게 도움이 된 것 같다.

그리고 드디어 주말에 매장에서 계약했던 의자가 배송되었다. 전 의자보다 훨씬 편하다. 허리도 덜 아프고! 조립하는 것도 재밌었음. 

내일은 오늘보다 더 어려운 걸 하는 것 같던데 심히 걱정이다. 게다가 3일 동안 진행되는 유닛이라 벌써 만만치 않음이 느껴짐... 마음 단단히 먹고 해야지 화이팅

 

🗝 키워드

프로토타입 체인, 상속, 디폴트 파라미터

 

🗣 스스로에게 설명

프로토타입 체인에 관한 설명은 아래 블로깅 과제로 대체한다.

<JavaScript> 프로토타입 체인

 

 

한 클래스에서 다른 클래스를 상속받기 위해 extends를 사용한다.

super()을 사용하면 부모 클래스의 생성자 함수에 접근할 수 있다.

super.~~ 이렇게 쓰면 부모 클래스의 메소드에 접근할 수 있다.

// Human 클래스
class Human {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  
  sleep() {
    return this.name + '은(는) 이만 자러 갑니다.';
  }
}

// Human을 상속받는 Employee 클래스
class Employee extends Human {
  constructor(name, age, gender, job) {
    // 이름, 나이, 성별은 Human에서 상속 받아옴
    super(name, age, gender)
    // Employee 클래스에만 있는 속성 job
    this.job = job;
  }
  
  goForWork() {
    return this.name + '은(는) 출근합니다..';
  }
  
  goHome() {
    return this.name + '은(는) 퇴근합니다!!';
  }
  
  sleep() {
    let status = super.sleep();
    return '집에 돌아온 ' + status;
  }
}

Human 클래스를 이용해 minsoo라는 인스턴스 객체를 생성했다.

여기서 sleep() 메소드를 쓰면 기본 문구가 나온다.

// 민수
let minsoo = new Human('민수', 25, 'male');

minsoo.sleep(); // '민수은(는) 이만 자러 갑니다.'

 

이번에는 Human 클래스를 상속받은 Employee 클래스를 이용해 chulsoo라는 인스턴스 객체를 생성했다.

여기서 sleep() 메소드를 쓰면 Employee 클래스에서 바꿨던 문구가 출력된다.

// 철수
let chulsoo = new Employee('철수', 25, 'male', 'Developer');

chulsoo.goForWork(); // '철수은(는) 출근합니다..'
chulsoo.goHome(); // '철수은(는) 퇴근합니다!!'
chulsoo.sleep(); // '집에 돌아온 철수은(는) 이만 자러 갑니다.'

 

🛠 질문 만들기

• 위의 코드에서 Human.prototype과 minsoo.__proto__는 같은가? 다르다면 그 이유는?
• 그렇다면 Human.prototype과 chulsoo.__proto__는 같은가? 다르다면 그 이유는?
• 클래스 정의 시 다른 클래스에서 상속을 받고 싶다면 어떤 키워드를 써야하는가?