javascript - Javascript 函数必须在调用之前定义吗？

Question

如果我在定义它之前运行下面的函数，我将收到此错误...

Uncaught ReferenceError: openModal is not defined

运行然后定义

$(document).ready( function() {

    delay(openModal, 2000);

    delay = function (f, t) {
        setTimeout(function() {
            f();
        }, t);
    };

    openModal = function () {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

现在，如果我先定义函数然后调用它，它就可以工作...我有 PHP 背景，所以我习惯于能够全局访问函数，我是做错了什么还是所有函数都必须定义在它们可以被使用之前？

$(document).ready( function() {

    delay = function (f, t) {
        setTimeout(function() {
            f();
        }, t);
    };

    openModal = function () {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

    delay(openModal, 2000);

} );

Answer 1

当您将函数分配给变量时，必须先对其进行分配，然后才能使用该变量访问该函数。

如果您使用常规语法声明函数而不是将其分配给变量，则它会在解析代码时定义，因此这是有效的:

$(document).ready( function() {

    delay(openModal, 2000);

    function openModal() {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

(不过，请注意作用域的差异。当您仅使用变量 openModal 隐式创建它时，它将在全局作用域中创建，并且可供所有代码使用。当您声明一个函数位于另一个函数内，它只能在该函数内部使用。但是，您也可以使用 var openModal = function() {.)

将变量设置为该函数的局部变量