[JS 딥다이브] 프로토타입 Quiz

mimmi·2025년 2월 9일

JavaScript

목록 보기

6/10

1번

다음 코드의 프로토타입이 생성되는 시점에 대해 설명해주세요

const Animal = (name) => {
  this.name = name;
};

console.log(Animal.prototype);

Non-constructor 는 프로토타입이 생성되지 않으므로 undefined

2번

다음 중 틀린 설명은?

프로토타입 체인은 객체의 속성을 찾을 때 객체에서부터 시작해 상위 프로토타입 객체로 거슬러 올라간다
프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype이다
프로타입 체인의 종점인 Object.prototype에서 프로퍼티를 검색할 수 없는 경우 에러가 발생한다
객체는 상위 프로토타입으로부터 속성을 상속받을 수 있다

3번
에러가 아닌 undefined를 반환

3번

다음 코드의 실행 결과에 대해 설명해주세요

const Vehicle = (function () {
  function Vehicle(type) {
    this.type = type;
  }

  Vehicle.prototype = {
    constructor: Vehicle,
  };

  return Vehicle;
}());

const car = new Vehicle('Car');
const bike = new Vehicle('Bike');

console.log(car.constructor === Vehicle);  // ?
console.log(bike.constructor === Vehicle); // ?
console.log(car.constructor === Object);  // ?
console.log(bike.constructor === Object);   // ?

true
true
false
false
생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체했기 때문에 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다.
하지만 프로토타입으로 교체한 객체 리터럴에 constructor 프로퍼티를 추가하여
프로토타입의 constructor 프로퍼티를 되살렸기 때문에 생성자 함수와 다시 연결될 수 있다.
따라서 car, bike 인스턴스의 생성자 함수는 Vehicle이다.

4번

다음 코드의 실행 결과에 대해 설명해주세요.

const car = {
    drive() {
        return "운전중...";
    }
};

const electricCar = Object.create(car);
electricCar.charge = function() {
    return "충전중...";
};

// 프로토타입 교체 (Object.setPrototypeOf 메서드)
// { fly() { return "나는중..."; } } 가 electircCar의 프로토타입

// 프로토타입 체인
// electricCar --> { fly() } --> Object.prototype --> null
Object.setPrototypeOf(electricCar, {
    fly() {
        return "나는중...";
    }
});

console.log(electricCar.drive());
console.log(electricCar.charge());
console.log(electricCar.fly());

car는 더이상 electricCar의 프로토타입이 아님.
- drive 메서드 찾을 수 없기 때문에 TypeError
charge는 electricCar 객체 자체에 있음.
- 충전중…
fly는 electirCar의 프로토타입 체인에서 찾을 수 있다.
- 나는중…

5번

다음 코드의 실행 결과에 대해 설명해주세요.

const vehicle = {
    type: "Car"
};

const myCar = Object.create(vehicle);

console.log(myCar instanceof Object);
console.log(myCar instanceof vehicle);

instanceof는 myCar의 프로토타입 체인을 따라가며 해당 객체가 Object의 인스턴스인지 확인한다.
- 모든 객체는 Object의 프로토타입 체인에 포함되므로 결과는 true .
instanceof 의 오른쪽에는 반드시 생성자 함수가 와야 한다. 그러나 vehicle은 생성자 함수가 아니라 일반 객체.
- 따라서 이 코드는 TypeError를 발생시킴.

6번

다음 설명 중 틀린 것은 무엇인가요?

프로토타입과 생성자 함수는 단독으로 존재할 수 없다.
객체 리터럴로 생선된 함수의 경우에도 프로토타입이 존재한다.
생성자 함수 호출과 객체 리터럴의 평가는 추상 연산 OrdinaryObjectCreate를 호출해 빈 객체를 생성하는 등 똑같이 이루어진다.
리터럴 표기법으로 생성한 객체도 생성자 함수로 생성한 객체와 본질적인 면에서 큰 차이는 없다.

4번
- 객체 리터럴에 의해 생성된 객체는 Object 생성자 함수가 생성한 객체가 아니다.
- Object 생성자 함수 호출과 객체 리터럴의 평가는 추상 연산을 호출하여 빈 객체를 생성하는 점에서 동일하나 new.target의 확인이나 프로퍼티를 추가하는 처리 등 세부 내용은 다르다.

7번

다음 코드의 실행 결과를 예측하고, 그 이유를 설명하세요.

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

Person.prototype.sayHello = function () {
  return `Hello, my name is ${this.name}`;
};

const person1 = new Person("Alice");

console.log(person1.sayHello()); // (1)
console.log(person1.hasOwnProperty("sayHello")); // (2)
console.log("sayHello" in person1); // (3)

person1에는 sayHello라는 프로토타입 메서드가 있기 때문에 Hello, my name is Alice가 출력된다.
hasOwnProperty는 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하고, 상속받은 프로토타입의 프로퍼티 키인 경우 false를 반환한다.
sayHello는 프로토타입의 메서드므로 false를 반환한다.
in은 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티를 확인하므로 true

8번

모든 함수는 기본적으로 Function.prototype을 상속받습니다. 그렇다면, 이로 인해 함수가 자동으로 사용할 수 있는 메서드에 대해 제시해주세요.

apply
call
bind
toString
length
name

9번

모든 객체는 Object.prototype을 상속받나요? 만약 아니라면 어떤 경우인가요?

Object.create(null)로 생성된 객체

Object.create(null)은 프로토타입 체인을 가지지 않는 객체를 만듭니다.이런 객체는 Object.prototype을 상속받지 않는다.

프로토타입 체인을 수동으로 조작한 경우

예를 들어, 객체의 프로토타입을 null로 설정하면, 해당 객체는 Object.prototype의 속성과 메서드를 상속받지 않는다.

10번

자바 스크립트가 지원하지 않는 패러다임은 무엇인가요 ?

명령형
함수형
프로토타입기반
논리형 프로그래밍
객체지향형 프로그래밍

4. 논리형 프로그래밍

11번

틀린것을 고르세요

자바스크립트의 오버라이딩은 상위 클래스가 가지고 있는 메서드를 하위 클래스에서 재정의하여 사용하는 방식이다.
자바스크립트의 오버로딩은 하나의 함수 이름으로 매개변수의 개수나 타입에 따라 여러 개의 함수를 정의하는 기능을 의미하며, 자바스크립트에서 기본적으로 지원된다.
프로퍼티 섀도잉은 하위 객체가 상위 객체의 동일한 이름을 가진 프로퍼티를 덮어써서 상위 객체의 프로퍼티가 가려지는 현상이다.
프로퍼티 섀도잉이 발생하면, 하위 객체의 프로퍼티가 우선적으로 참조된다.
메서드 오버라이딩을 통해 상속받은 메서드의 기본 동작을 변경할 수 있다.

2번
자바스크립트의 오버로딩은 하나의 함수 이름으로 매개변수의 개수나 타입에 따라 여러 개의 함수를 정의하는 기능을 의미하며, 자바스크립트에서 기본적으로 지원된다.
- 자바스크립트는 지원하지 않는다. arguments 객체를 사용해 구현할 수는 있다.

12번

다음 중 자바스크립트의 instanceof 연산자를 사용할 때 TypeError가 발생하는 상황은 무엇인가요?

instanceof의 왼쪽 피연산자가 null일 때
instanceof의 오른쪽 피연산자가 undefined일 때
instanceof의 오른쪽 피연산자가 객체가 아닌 원시값일 때
instanceof의 왼쪽 피연산자가 객체가 아닌 원시값일 때
instanceof의 왼쪽과 오른쪽이 모두 null일 때

left instanceof right
- left: 객체
- right: 생성자 함수 또는 프로토타입 객체
  - 우변의 피연산자가 함수가 아닌 경우, TypeError
  - 우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하지 않으면 true, 아니면 false