[19장] 프로토타입

[juyeon-park]

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

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

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

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

[suehdn]

Q 다음 문제의 답을 O,X로 답해주세요.

1. 프로토타입 체인의 모든 객체는 Object.hasOwnProperty()를 사용할 수 있다.
2. 화살표 함수로 정의한 메서드는 Object.prototype를 상속한다.

정답

1번. X
체인의 종점에 위치한 객체는 Object.prototype의 빌트인 메서드를 사용할 수 없다.
2번. X
화살표 함수 메서드는 non-constructor로 프로퍼티를 소유하지 않아 프로토타입을 생성하지 않음

[ghost]

Q 다음 물음에 답하세요

function Gunwoo(game){
  this.favoriteGame = game;
}

const gunwoo =  new Gunwoo("LOL");

const mother = {
  watchYou(){
    console.log("what are u doing");
  }
}

Object.setPrototypeOf(gunwoo, mother);

console.log(gunwoo instanceof Gunwoo); //???

위 그림은 gunwoo 객체의 프로토타입 상속 관계를 나타낸 그림입니다.

위 그림에는 틀린 화살표가 있습니다. 틀린 화살표 번호가 뭔지 말씀해주시고 A와 B가 무엇인지 말씀해주세요!

또한 위 코드를 실행하면 무엇이 출력될까요?

퀴즈 정답

A : constructor
B : prototype

2번 화살표가 틀렸습니다 (gunwoo 객체의 프로토타입은 mother 객체이며 Gunwoo 생성자 함수의 prototype에 바인딩된 객체는 `Gunwoo.prototype` 입니다. gunwoo 객체의 프로토타입을 강제로 변환하여 관계가 깨져있겠지요. 객체 리터럴로 생성한 객체의 프로토타입은 항상 Object.prototype 입니다. )

false 가 출력됩니다. (instanceof 연산자는 우변 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true 그렇지 않으면 false를 반환합니다. Gunwoo.prototype은 더이상 gunwoo 객체의 프로토타입 체인상에 존재하지 않습니다.)

[dudwns]

Q. 퀴즈 내용

1. 다음 코드의 실행 결과를 작성하시오.

const person = { name: "프롱이" };

console.log(person.hasOwnProperty("__proto__")); (1)

console.log({}.__proto__ === Object.prototype); (2)

2. __proto__ 접근자 프로퍼티를 통해서 프로토타입에 접근해야 하는 이유를 간단하게 서술하시오.

퀴즈 정답

1번 정답: false, true

1번 풀이
(1) person 객체는 proto 프로퍼티를 소유하지 않고 상속 받은 것이다.
(2) 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.

2번 정답: 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다.

[jonghyunlee95]

Q. 다음 코드를 읽고 실행 결과를 작성해주세요.

const sophia = {};
const frong = {};

frong.__proto__ = sophia;
sophia.__proto__ = frong; (1)

function Devcorse(child) {
    this.child = child;
}

const frong = new Devcorse('frong');
console.log(frong.constructor === Devcorse); (2)

퀴즈 정답

(1) 오류 발생 - 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 하므로 TypeError: cyclic __proto__ value

(2) true - frong객체를 생성한 생성자 함수는 Devcorse입니다.

[juyeon-park]

Q. JS 엔진에서 밑 코드의 실행할 때 검색 과정을 순서대로 작성해주세요!
총 4가지의 순서입니다. A B C D E 중 하나는 거짓!

function Student(name){
   this.name = name;
}

Student.prototype.greeting = function ( ) {
   console.log(`${this.name}님 데브코스에 오신걸 환영합니다!`);
};

const me = new Student('프롱이');

console.log(me.hasOwnProperty('phone'));

(A) Object.prototype에서 프로퍼티를 검색할 수 없어 에러가 발생한다.
(B) Object.prototype의 hasOwnProperty 메서드를 호출하고 me 객체에서 프로퍼티를 검색할 수 없어 false가 반환된다.
(C) Student.prototype에서 hasOwnProperty 메서드를 검색한다.
(D) me객체에서 hasOwnProperty 메서드를 검색한다.
(E) Object.prototype으로 이동하여 hasOwnProperty 메서드를 검색한다

퀴즈 정답

D - C - E - B

프로토타입 체인과 관련된 문제였습니다! 프로토타입 체인의 최상위에 위치하는 객체는 항상 Object.prototype 인것을 잊지마세요! Object.prototype에서 프로퍼티를 검색할 수 없는 경우 에러가 발생하지 않고 undefined를 반환해줍니다

[hyoribogo]

Q. 다음 코드의 출력 결과는?

function Pet(name) {
  this.name = name
  this.introduce = function () {
    console.log(`우리 집 애완 동물의 이름은 ${this.name}이야~`)
  }
}

Pet.prototype.callPet = function () {
  console.log(`${this.name}~~ 이리오자~`)
}

const dog = new Pet('너구리')
const cat = new Pet('애용이')

console.log(dog.introduce === cat.introduce)   // (1)
console.log(dog.callPet === cat.callPet)       // (2)
console.log(dog.giveLove === cat.giveLove)     // (3)

퀴즈 정답

(1) false : 인스턴스를 생성할 때마다 새로운 메서드를 중복 생성하기 때문에 같지 않다.
(2) true: 프로토타입을 통해 상속 받았기 때문에 같다.
(3) true: 존재하지 않는 메서드로, undefined가 반환되기 때문에 둘은 같다.