未捕获的 TypeError：非法调用 javascript答案

【问题标题】：Uncaught TypeError: Illegal invocation javascript未捕获的 TypeError：非法调用 javascript
【发布时间】：2016-12-07 05:31:42
【问题描述】：

如何解决此类调用函数时的非法调用问题

new FullScreen().request(); // 未捕获的 TypeError：非法调用
新的 FullScreen().cancel(); //未捕获的TypeError：非法调用
新的 FullScreen().toggle(); //未捕获的TypeError：非法调用

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();
    }
}

【问题讨论】：

标签： javascript ecmascript-6

【解决方案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();
    }
}

【讨论】：

【解决方案2】：

Javascript 中的

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 实例，导致非法调用异常。要修复错误，需要在构造函数中绑定上下文。

【讨论】：