Javascript - instanceof 연산자와 프로토타입 체인

해당 포스팅은 자바스크립트의 instanceof 연산자와 프로토타입 체인에 대해 설명한다. 우리가 Array, Date 등 객체를 생성할 때 사용하는 빌트인 객체 함수가 생성자 함수임을 기억한 채, instanceof 연산자의 원리에 대해 이해해보자.

instanceof 연산자

a. [정의]

좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받는 이항 연산자

객체 instanceof 생성자 함수

b. 특징

1. instanceof 연산자는 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인한다. 해당 객체가 프로토타입 체인에 존재 시 해당 프로토타입의 메소드를 상속받는다.

   function Person(name) {
     this.name = name;
   }
   
   const me = new Person('Lee');
   me instanceof Person; // true
   me instanceof Object; // true

   prototype chain
   - 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.
   - [[Prototype]]은 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯으로, 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킨다.
   - Object.prototype는 프로토타입 체인의 최상위 객체이므로, 모든 객체는 Object.prototype를 상속받는다.

2. 우변의 피연산자가 생성자 함수가 아닐 시 TypeError

   // 객체 리터럴 생성
   const obj = {
       name: "fgStudy",
       age: 20,
       location: "korea"
   }
   
   // Object는 빌트인 생성자 함수이다.
   obj instanceof Object; // true
   
   // 일반함수는 constructor이다.
   function a1() {}
   obj instanceof a1 // false
   
   // arrow function은 non-constructor이다.
   const a2 = () => {}
   obj instanceof a2 // Uncaught TypeError: Function has non-object prototype 'undefined' in instanceof check