[25장] 클래스 - 2

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[eeseung]

Q. 다음은 상속 클래스의 인스턴스 생성 과정을 나타낸 코드입니다. 주석 시점에서 실행 결과를 예상해 보세요.

class Student{
  constructor(name, age) {
    console.log(this); // (1)
    this.name = name;
    this.age = age;
    console.log(this); // (2)
  }
}

class Frong extends Student{
  constructor(name, age, team) {
    super(name, age);
    console.log(this); // (3)
    this.team = team;
    console.log(this); // (4)
  }
}

const frong = new Frong('프롱이', 20, '누구');

퀴즈 정답

(1) Frong {}
(2) Frong {name: '프롱이', age: 20}
(3) Frong {name: '프롱이', age: 20}
(4) Frong {name: '프롱이', age: 20, team: '누구'}

[hyoribogo]

Q. 다음 코드를 보고 에러가 나는 부분 번호와 그 이유를 적어주세요.
( 코드는 에러를 무시하고 전부 실행된다고 가정합니다. )

class Base {
  name = 'hyori'      // (1)
  constructor(a, b) {
    this.a = a
    this.b = b
    age = 24      // (2)
  }
}

class Derived extends Base {
  constructor(a, b, c, d) {
    this.c = c        // (3)
    super(a, b)
    this.d = d       // (4)
  }
  sayName() {
    console.log(this.name)
  }
}

const derived = new Derived(1, 2, 3)
derived.sayName()    // (5)

퀴즈 정답

답은 (2), (3)

(2): constructor 내부에서는 this 키워드를 사용해서 프로퍼티를 추가해야 한다.
(3): super 호출 이전에 this를 참조할 수 없다. 서브 클래스는 super 호출 이후에 인스턴스가 생기기 때문이다.(정확하게는 super가 반환한 인스턴스 객체가 this에 바인딩 된다.)

[juyeon-park]

Q. 다음의 예시 코드를 참고하며 상속 클래스의 인스턴스 생성 과정을 순서대로 작성해주세요.

class Devcourse{
    constructor(name, team){
        this.name = name;
        this.team = team;
    }

    getTeamInfo(){
        return `${this.team}팀 입니다!`
    }
}

class Frong extends Devcourse{
    constructor(name, team, age){
        super(name,team);
        this.age = age;
    }
}

const frong = new Frong('프롱이', '성기동', 20);
console.log(frong.getTeamInfo());

1. 서브클래스 constructor로의 복귀와 this 바인딩
2. 서브클래스의 super 호출
3. 수퍼클래스의 인스턴스 초기화
4. 인스턴스 반환
5. 수퍼클래스의 인스턴스 생성과 this 바인딩
6. 서브 클래스의 인스턴스 초기화

퀴즈 정답

2-5-3-1-6-4

[suehdn]

Q . 다음 코드의 결과를 예상해주세요! (오류가 발생해 실행이 중단 될 수도 있는 건 무시해주세요)

class Language{
    #a = '';
    constructor(a,b){
        this.#a = a;
        this.b = b;
        console.log(this) -(1)
    }
    Hi(){
        return `안녕하세요!`
    }
}
class JavaScript extends Language{
    Hi(){
        console.log(this); -(2)
        return `${super.Hi()} ${this.#a} ${this.b} 자바스크립트입니다!`
    }
}
const js = new JavaScript("굉장히","중요한");
console.log(js); -(3)
console.log(js.Hi());-(4)

정답

1. JavaScript {#a: '굉장히,b: '중요한''}
2. JavaScript {#a: '굉장히,b: '중요한''}
3. JavaScript {#a: '굉장히,b: '중요한''}
4. Uncaught SyntaxError: Private field '#a' must be declared in an enclosing class : #a는 private이기 때문에 자식 클래스에서도 참조할 수 없다.

[dudwns]

Q1. 다음 코드에서 에러가 발생하는 이유를 서술하시오.

class Parent {}

class Child extends Parent {
  constructor(){
    console.log("Hi~");
  }
}

const child = new Child();
console.log(child);

Q2. 클래스의 상속관계를 정의하였을 때 프로토타입 메서드, 정적 메서드가 모두 상속이 가능한 이유를 간략하게 서술하시오.

퀴즈 정답

Q1. 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 한다.

Q2. 수퍼클래스와 서브클래스는 인스턴스의 프로토타입 체인뿐 아니라 클래스 간의 프로토타입 체인도 생성하기 때문이다.

[jonghyunlee95]

Q. 다음 코드를 읽고 (1), (2)의 반환 결과를 작성 해주세요.

class BottomDuo {
  constructor (ad, sup) {
    this.ad = ad;
    this.sup = sup;
  }

  combination() {
    return `${this.ad}와(과) ${this.sup}는 좋은 조합입니다.`
  }
}

class Combination extends BottomDuo {
  constructor(ad1, sup1, ad2, sup2) {
    super(ad1, sup1);
    this.ad2 = ad2;
    this.sup2 = sup2;
  }

  combination() {
    if (this.ad2 === '가렌' || this.sup2 === '가렌') {
      return super.combination() + `하지만 ${this.ad2}와(과) ${this.sup2}는 안좋은 조합입니다.`    
    } else {
      return super.combination() + ` ${this.ad2}와(과) ${this.sup2}도 역시 좋은 조합입니다.`
    }
  }
}
const badCombination = new Combination('카이사', '노틸러스', '야스오', '가렌');
badCombination.combination(); (1)

const goodCombination = new Combination('진', '제라스', '이즈리얼', '카르마');
goodCombination.combination(); (2)

퀴즈 정답

정답 설명
(1) - '카이사와 노틸러스는 좋은 조합입니다. 하지만 야스오와 가렌는 안좋은 조합입니다.'
(2) - '진와(과) 제라스는 좋은 조합입니다. 이즈리얼와(과) 카르마도 역시 좋은 조합입니다.'