Babel6 계에서 extends 한 클래스에 instanceof를 사용하는 방법

확인한 버전



babel-core v6.26.0
babel-plugin-transform-builtin-extend v1.1.2

babel6 시스템으로 컴파일하면 instanceof가 올바르게 작동하지 않습니다.


class CustomError extends Error {};

console.log(new CustomError() instanceof Error);       // true
console.log(new CustomError() instanceof CustomError); // false!!!

원인



영어가 좋지 않으므로 자세히 읽을 수는 없지만 6 계열의 버그처럼 보입니다.
htps : // 기주 b. 코 m / 바베 l / 바베 l / 이스에 s / 3083

회피 방법



1.prototype 덮어쓰기


class CustomError extends Error {};
CustomError.prototype = Error.prototype; // ここ!

console.log(new CustomError() instanceof Error);       // true
console.log(new CustomError() instanceof CustomError); // true♪

※여러가지 시험해 보았습니다만, 왜 이것으로 고쳐지는지까지는 쫓지 않았습니다,,, 가르쳐 위대한 사람!

2. 플러그인 넣기



babel-plugin-transform-builtin-extend
.babelrc
{
    "plugins": [
        ["babel-plugin-transform-builtin-extend", {
            globals: ["Error", "Array"]
        }]
    ]
}

요약


  • babel6 계에서 extends 한 클래스에 instanceof를 걸어도 올바르게 움직이지 않는다
  • 상기의 회피 방법을 2개 소개
  • 개인적으로 방법 1에서 대상 이슈 링크를 붙이는 것을 채용

  • 참고 링크


  • 대상 이슈
  • MDN instanceof
  • 그림에서 이해하는 JavaScript의 프로토 타입 체인
  • prototype 및 __proto__

  • 여담



    babel의 버그이므로 Chrome에서 직접 실행하면 의도대로 작동하는지 확인할 수 있습니다.

    좋은 웹페이지 즐겨찾기