ch25-해설.md

Chapter25 클래스

📌문제1

클래스 또는 생성자 함수에서 프로토타입 메서드와 정적 메서드의 차이점을 작성하시오.

정답 및 해설

1. 프로토타입 메서드와 정적 메서드는 자신이 속해 있는 프로토타입 체인이 다르다.
(프로토타입 메서드는 인스턴스의 프로토타입의 메서드이고, 정적 메서드는 크래스 또는 생성자 함수의 메서드이다.)
2. 프로토타입 메서드는 인스턴스를 통해 호출할 수 있고, 정적 메서드는 클래스 또는 생성자 함수를 통해 호출할 수 있다.
3. 프로토타입 메서드는 인스턴스의 프로퍼티를 참조할 수 있지만, 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없다.

• p430~432

📌문제2

아래 두 코드의 차이점을 작성하시오.

// 코드1
class Person {
  name = 'Kim';
}

// 코드2
class Person {
  constructor() {
    this.name = 'Kim';
  }
}

정답 및 해설

차이점은 없습니다.
인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 없다면 코드1의 방식을 사용하고,
인스턴스를 생성할 때 외부 초기값으로 클래스 필드를 초기화할 필요가 있다면 코드2의 방식을 사용한다.

• p443~445

📌문제3

다음 보기의 True, False를 판단하시오.

(1) : 클래스, 생성자 함수 모두 암묵적으로 strict mode가 지정된다.
(2) : 클래스 이름으로 파스칼 케이스를 사용하는 것이 일반적이다.
(3) : 클래스는 일급 객체이므로 함수의 반환값으로 사용할 수 있다.
(4) : 클래스의 프로토타입 메서드를 작성할 때는 static 이라는 키워드를 사용한다.
(5) : 클래스 선언문으로 정의한 클래스는 소스코드 평가 과정(런타임 이전)에 먼저 평가된다.
(6) : 클래스 선언문은 let, const 키워드로 선언한 변수처럼 호이스팅 안되어 일시적 사각지대에 빠질 위험이 있다.
(7) : 클래스의 constructor 메서드 내부의 this는 클래스가 생성한 인스턴스를 가리킨다.
(8) : 클래스의 constructor 메서드 반환값을 작성하면 암묵적인 this 반환이 무시된다.

정답 및 해설

(1) : False (p418)
클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다.
하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.

(2) : True (p419)

(3) : True (p419)

(4) : False (p420)
클래스의 정적 메서드를 작성할 때 static 이라는 키워드를 사용한다.

(5) : True (p421)

(6) : False (p422)
클래스 선언문은 let, const 키워드로 선언한 변수처럼 호이스팅되어 일시적 사각지대에 빠질 위험이 있다.

(7) : True (p425)

(8) : False (p428)
명시적으로 객체를 반환하면 암묵적인 this 반환이 무시된다.
하지만 원시값을 반환하면 원시값 반환이 무시되고 암묵적으로 this가 반환된다.

📌문제 4

다음을 보고 true or false를 고르시오

1. ES6에서 도입된 class는 클래스 기반 객체지향 모델을 지원한다.
2. class는 함수와 같이 1급 객체이다. 
3. typeof Person === `function`
4. 클래스 선언문으로 정의한 클래스는 런타임 이전에 객체를 생성하고, 
그 때문에 클래스 정의 이전에 참조할 수 있다. 

정답 및 해설

1. false - 내부적으로는 프로토타입 모델이다
2. true - 1급 객체로 평가된다
3. true - class는 함수로 취급된다. 
4. false - 런타임 이전에 객체를 생성하지만 const, let 과 같이 작동하기 때문에 참조할 수 없다. 

📌문제 5

다음 클래스와 생성자 함수의 정의 방식을 짝지어 주세요.

var Person = (function () {
	function Person (name) { // A
		this.name = name;
	}

	Person.prototype.sayHello = function () { // B
		console.log(`Hello`);
	}

	Person.sayHello = function (){ // C
		console.log('Hello');
	}
	
	return Person;
})();

class Person {
	constructor(name) { // 1
		this.name = name;
	}

	static sayHello(){ // 2
		console.log("Hello!");
	}

	sayHello(){ // 3
		console.log(`Hello`)
	}
}

정답 및 해설

A - 1 / B - 3 / C - 2

📌문제 6

다음 중 오류가 나는 것을 모두 고르시오.

// 1
class Person1{}

// 2
class Person2{
	constructor(){}
	constructor(){}
}

// 3
class Person3{
	constructor(name){
		this.name = name;
	}
	static print(){
		console.log(name)
	}
}

// 4
class Person4{
	constructor(name){
		this.name = name;
		return name;
	}
}

정답 및 해설

2
1 - 암묵적으로 빈 constructor 가 정의된다

2 - constructor는 1개여야만 한다. 따라서 에러가 난다.

3- 정적 메서드는 인스턴스의 프로퍼티를 참조할 수 없다. 따라서 아무것도 출력되지 않는다. 

4 - 객체가 아니면 암묵적으로 객체를 반환한다. return 문은 constructor 내부에서 쓰지 않아야 한다.

📌문제7

다음 문장의 true or false를 판단하세요.

(1) 생성자 함수는 new 연산자 없이 호출하면 에러가 발생한다.
(2) 클래스는 상속을 지원하는 extends와 super 키워드를 지원하지 않는다.
(3) 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행된다.
(4) 클래스는 일급객체이다.

정답 및 해설

418p
(1) false
클래스를 new연산자 없이 호출하면 에러가 발생한다.
하지만 생성자 함수를 new연산자 없이 호출하면 일반 함수로서 호출된다.

(2) false

클래스는 상속을 지원하는 extends와 super 키워드를 제공한다.
하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다.

(3) true

클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며, strict mode를 해제할 수 없다.
하지만 생성자 함수는 암묵적으로 strict mode가 지정되지 않는다.

(4) true
419p
클래스는 함수다. 따라서 클래스는 값처럼 사용할 수 있는 일급 객체이다.

📌문제8

다음 코드의 문제점을 작성하세요.

(1)

console.log(Person);

class Person {}

(2)

class Person {}

const me = Person();

console.log(me);

(3)

const Person = class MyClass{};

const me = new Person();

console.log(MyClass);

const you = new MyClass();

정답 및 해설

(1) 421p
ReferenceError: Cannot access 'Person' before initialization
클래스는 클래스 정의 이전에 참조할 수 없다.

(2) 422p
TypeError: Class constructor Person cannot be invoked without 'new'
클래스는 인스턴스를 생성하는 것이 유일한 존재 이유이므로 반드시 new 연산자와 함께 호출해야 한다.
따라서 new 연산자 없이 호출하면 타입 에러가 발생한다.

(3) 423p
ReferenceError: MyClass is not defined
기명 함수 표현식과 마찬가지로 클래스 표현식에서 사용한 클래스 이름은 외부 코드에서 접근 불가능하다.

📌문제9

클래스에서 정의한 메서드의 특징을 아는대로 작성하세요.

정답 및 해설

(1) function 키워드를 생략한 메서드 축약 표현을 사용한다.
(2) 객체 리터럴과는 다르게 클래스에 메서드를 정의할 때는 콤마가 필요 없다.
(3) 암묵적으로 strict mode로 실행된다.
(4) for ... in 문이나 Object.keys 메서드 등으로 열거할 수 없다.
즉, 프로퍼티의 열거 가능 여부를 나타내며, 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false다.
(5) 내부 메서드 [[Construct]]를 갖지 않는 non-constructor다. 따라서 new 연산자와 함께 호출할 수 없다.

📌문제10

다음 보기의 True, False를 판별하시오.

1. 서브 클래스에서는 constructor를 생략할 수 없다.
2. 클래스는 생성자 함수를 상속받을 수 없다.
3. 서브 클래스에서 부모 클래스의 프로퍼티, 메서드를 참조하려면 super 키워드를 통해서만 참조할 수 있다.

정답 및 해설

1. False p454
수퍼클래스, 서브클래스 모두 constructor를 생략할 수 있다.
서브클래스에서 constructor를 생략해도 암묵적으로 super 키워드 호출까지 진행된다.

2. False p453
(이 반대로 클래스를 생성자 함수로 상속받는 방법은 찾지 못했습니다..)

3. False p457
서브 클래스에서 this 키워드를 통해서도 참조 가능하다.
그러나 메서드 오버라이딩의 경우 this를 사용하면 스택오버플로우로 에러가 생긴다.

📌문제11

아래 코드와 같이 서브 클래스의 constructor 작성시 super를 가장 상단의 적어야하는 이유를 작성하시오.

class ColorRectangle extends Rectangle {
  constructor(width, height, color) {
    super(width, height);
    this.color = color;
  }
}

정답 및 해설

서브 클래스는 super에 의해 인스턴스 생성을 수퍼 클래스에게 위임한다.
서브 클래스는 super에 의해 반환된 인스턴스를 this에 바인딩하여 그대로 사용한다.
따라서 super가 호출되지 않으면 인스턴스가 생성되지 않고 this도 사용하지 못한다.

• p463~465

📌문제12

다음 코드에서 (1)과 (2)의 출력 코드가 다른 이유를 작성하시오.

class FirstClass {
  constructor () {
    this.age = 10;
  }

  print() {
    console.log('firstClass', this.age);
  }
}
class SecondClass extends FirstClass {
  constructor () {
    super();
    this.age = 20;
  }
  print() {
    console.log('secondClass', this.age);
  }
}
const first = new FirstClass();
const second = new SecondClass();

second.print(); // (1) secondClass 20
second.__proto__.print(); // (2) secondClass undefined

정답 및 해설

호출된 함수 내 this가 다르기 때문이다.

(1)에서 print를 호출한 객체는 second 인스턴스이다.
따라서 this는 second를 가리키며 second 인스턴스가 가진 age를 출력하게 된다.

(2)에서 print를 호출한 객체는 second 인스턴스의 [[Prototype]]이다.
이는 second.__proto__ 또는 SecondClass.prototype 와 동일하다.
그리고 SecondClass의 constructor 내 this.age는 SecondClass를 이용하여 만든 인스턴스를 가리키는 this이다.
SecondClass를 가리키는 this가 아니다.
따라서 메서드만 있는 있는 클래스의 프로토타입에는 age 프로퍼티가 없어서 undefined를 출력하게 된다.

• p461~462

📌문제13

다음 문장의 true or false를 판단하세요.

(1) 수퍼클래스의 함수에서 super를 호출하면 에러가 발생한다.
(2) 수퍼클래스의 constructor 내부의 this는 생성된 인스턴스를 가리킨다.
(3) 서브클래스의 constructor에서 this를 참조할 수 없는 경우도 있다.

답안 작성

(1) true
457p
super는 반드시 서브클래스의 constructor에서만 호출한다.
서브클래스가 아닌 클래스의 constructor나 함수에서 super를 호출하면 에러가 발생한다.

(2) true
463p
수퍼클래스의 constructor 내부의 코드가 실행되기 이전에 암묵적으로 빈 객체를 생성한다.
그리고 암묵적으로 생성된 빈 객체(인스턴스)는 this에 바인딩된다.
따라서 수퍼클래스의 constructor 내부의 this는 생성된 인스턴스를 가리킨다.

(3) true
465p
서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩하여
그대로 사용하기 때문에 super가 호출되지 않으면 인스턴스가 생성되지 않으며 this 바인딩도 불가하다.
따라서 서브클래스의 constructor에서 super를 호출하기 전에는 this를 참조할 수 없다.

📌문제14

다음 빈칸에 들어갈 단어를 작성하세요.

(1) extends 키워드 앞에는 반드시 ***이(가) 와야 한다.
(2) 수퍼클래스와 서브클래스 모두 constructor를 생략하면 ***이(가) 생성된다.
(3) super를 호출하면 수퍼클래스의 ***호출하고,
super를 참조하면 수퍼클래스의 ***를 호출할 수 있다.

답안 작성

(1) 453p 클래스
(2) 455p 빈 객체
(3) 455p constructor, 메서드

📌문제15

상속 클래스의 인스턴스 생성 과정을 순서대로 작성하세요.

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

답안 작성

460~466p
(1) - (4) - (3) - (5) - (6) - (2)