Question

<script type="text/javascript">
    function CustomAlert() {
        this.render = function() {
            var winW = window.innerWidth;
            var winH = window.innerHeight;
            var dialogOverlay = document.getElementById('dialogOverlay');
            var dialogbox = document.getElementById('dialogbox');

            dialogOverlay.style.display = "block !important ";
            dialogOverlay.style.height = winH+"px !important ";
            dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
            dialogbox.style.top = "100px !important ";
            dialogbox.style.display = "block !important";
        }

        this.ok = function () {
        }
    }

    function HighScore( arg )
    {
        CustomAlert().render();
    }
</script>

为什么告诉我CustomAlert未定义？我还尝试将CustomAlert()分配给var但是控制台告诉我var现在是未定义的。

Answer 1

当被称为normal function（CustomAlert()）时，您的函数不会返回任何内容。但是，您可以在调用函数时使用constructor function运算符将其作为new（new CustomAlert()）调用。这将导致函数中的this引用新创建的对象实例，并自动将该实例用作返回值：

function HighScore( arg )
{
    new CustomAlert().render();
}

另一种（但肯定不是等价的）解决方案是直接从CustomAlert返回一个新对象：

function CustomAlert() {
    var obj = {
        render: function () {
            ...
        },
        ok: function () {
            ...
        }
    };

    return obj;
}

现在你可以像普通函数一样调用它：

function HighScore( arg )
{
    CustomAlert().render();
}

Answer 2

为什么告诉我CustomAlert未定义？我也试过了将CustomAlert（）分配给var但是consol告诉我那个 var现在未定义??

因为您应该创建此

的对象

var customerAlert = new CustomAlert();

然后调用它的render方法。

或者在一个声明中：

function HighScore( arg )
{
    new CustomAlert().render();
}

这称为构造函数调用模式。

实际上，可以使用以下方法之一调用JavaScript函数：

方法调用模式
函数调用模式
构造函数调用模式
应用调用模式

方法调用模式

当函数存储为对象的属性时，将使用此调用方法。因此，我们将此函数称为方法，就像在其他面向对象的语言中一样。当我们调用该函数时，它绑定到该对象。例如：

var app = {
    render: function() {
                var winW = window.innerWidth;
                var winH = window.innerHeight;
                var dialogOverlay = document.getElementById('dialogOverlay');
                var dialogbox = document.getElementById('dialogbox');

                dialogOverlay.style.display = "block !important ";
                dialogOverlay.style.height = winH+"px !important ";
                dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
                dialogbox.style.top = "100px !important ";
                dialogbox.style.display = "block !important";
        }
        ok : function () {

        }
};

在这种情况下，我们会调用render方法，如下所示：

app.render();

功能调用模式

这是函数不是对象属性的情况。在这种情况下，函数绑定到全局对象 - 通常是Web应用程序中的窗口对象。

var render = function(){
    var winW = window.innerWidth;
                var winH = window.innerHeight;
                var dialogOverlay = document.getElementById('dialogOverlay');
                var dialogbox = document.getElementById('dialogbox');

                dialogOverlay.style.display = "block !important ";
                dialogOverlay.style.height = winH+"px !important ";
                dialogbox.style.left = (winW/2) - (550 * .5) + "px !important ";
                dialogbox.style.top = "100px !important ";
                dialogbox.style.display = "block !important";
};

然后我们将其称为如下：

render();

构造函数调用模式

这是我们使用new前缀调用函数的情况。在这种情况下，将创建一个新对象。这是创建具有相同属性的对象的好方法。这些函数称为构造函数和by convention，它们的名称以大写字母开头。

应用调用模式

apply方法让我们有机会构造一个将用于调用函数的参数数组。此外，它使我们能够选择this。

的值

有关上述内容的更多信息，请参阅JavaScript: The Good Parts

为什么我的函数调用不起作用？

2 个答案: