Uncaught TypeError:. Незаконный вызов Javascript

Question

как исправить Illegal вызов, когда вызов функции в этом классе

новый Полноэкранный() запрос(); // Uncaught TypeError: незаконный вызов
новый FullScreen(). Cancel(); // Uncaught TypeError: незаконный вызов
новый FullScreen(). Toggle(); // Uncaught TypeError: Illegal вызов

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 в Javascript в контексте связанных. Когда вы звоните 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, что приводит к исключению незаконного вызова. Чтобы исправить ошибку, вам нужно связать контекст в конструкторе.