キャッチされていない型エラー：不正な呼び出しjavascript

Question

このクラスでの呼び出し時に不正な呼び出しが発生する

new FullScreen（）。request（）; //キャッチされていないTypeError：不正な呼び出し
新しいFullScreen（）。cancel（）; //キャッチされていないTypeError：不正な呼び出し
新しいFullScreen（）。toggle（）; //キャッチされない例外TypeError：不正な呼び出しJavaScriptで

import validator from "Validator"; 

export default class FullScreen { 
    constructor() { 
     if (validator.checkValueType(Modernizr.fullscreen, "BOOLEAN") && Modernizr.fullscreen) { 
      this.requestFullscreen = document.documentElement.requestFullscreen || document.documentElement.msRequestFullscreen || 
       document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen; 
      this.cancelFullScreen = document.cancelFullScreen || document.msCancelFullScreen || document.mozRequestFullScreen || document.webkitRequestFullscreen; 
     } else { 
      throw new UserException("Fullscreen not supported in this browser"); 
     } 

    } 

    request() { 
     this.requestFullscreen(); 
    } 

    cancel() { 
     this.cancelFullScreen(); 
    } 

    isFullScreen() { 
     return document.isFullScreen || document.msIsFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen; 
    } 

    toggle() { 
     if (this.isFullScreen()) this.cancel(); 
     else this.request(); 
    } 
} 

Answer 1

これをテストしないと、ドキュメントの文脈を失ってしまっている可能性があります。私はあなたのメソッドにドキュメント要素をシフトすることをお勧めします。

import validator from "Validator"; 

export default class FullScreen { 
    constructor() { 
     if (!validator.checkValueType(Modernizr.fullscreen, "BOOLEAN") && Modernizr.fullscreen) { 
      throw new UserException("Fullscreen not supported in this browser"); 
     } 
    } 

    request() { 
     document.documentElement.requestFullscreen || document.documentElement.msRequestFullscreen || 
       document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen; 
    } 

    cancel() { 
     document.cancelFullScreen || document.msCancelFullScreen || document.mozRequestFullScreen || document.webkitRequestFullscreen; 
    } 

    isFullScreen() { 
     return document.isFullScreen || document.msIsFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen; 
    } 

    toggle() { 
     if (this.isFullScreen()) this.cancel(); 
     else this.request(); 
    } 
} 

Answer 2

thisがコンテキスト関連しています。 this.request()に電話すると、this.requestFullscreen()に変換されます。 this.requestFullscreen = document.documentElement.requestFullscreen,this.requestFullscreen() != document.documentElement.requestFullscreen()。代わりに、this.requestFullscreen() == document.documentElement.requestFullscreen.call(this)。言い換えれば、requestFullscreen関数はdocumentElementをthisポインタとして想定していますが、FullScreenインスタンスを取得し、その結果、不正な呼び出し例外が発生します。エラーを修正するには、コンストラクタでコンテキストをバインドする必要があります。