在调用之前是否必须定义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() { 。）将变量设置为函数的局部变量。

Answer 2

将函数定义移到document.ready块之外，事情将按预期工作。 在javascript中（与大多数语言一样），您必须在引用函数或变量之前定义它。

在第一个示例中，您在对delay()的调用中引用了openModal ，但是javascript无法知道openModal是什么。

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

$(document).ready( function() {
    delay(openModal, 2000);
});

编辑：

TJHeuvel指出，在同一个块中执行任何其他操作之前， function确实有一些技巧来定义函数： 为什么我可以在Javascript中定义之前使用函数？

Answer 3

我会说，是的。 在调用之前必须始终定义函数。 但是某些函数可以在定义它们之前被调用（调用）（起始）

我想写的两种不同类型的函数是：

表达函数和减速函数

1-表达式函数：函数表达式可以存储在变量中，因此它们不需要函数名称。它们也将被命名为匿名函数（没有名称的函数）。 要调用（调用），它们总是需要使用变量名。如果在定义之前调用，这意味着在这里没有发生提升，那么这些函数将不起作用。 我们必须首先定义表达式函数然后再调用它。

let lastName = function (family) {
 console.log("My last name is " + family);
};        
let x = lastName("Lopez");

这是你在ES6中写的方式：

lastName = (family) => console.log("My last name is " + family);
x = lastName("Lopez");

2-减速功能：使用以下语法声明的功能不会立即执行。 它们被“保存供以后使用”，并且将在以后调用（被调用）时执行。如果您在定义它们之前或之后调用它们，这些类型的函数都可以工作。 如果在定义之前调用减速功能 - 提升 - 正常工作。

function Name(name) {
  console.log("My cat's name is " + name);
}
Name("Chloe");

吊装示例：

Name("Chloe");
function Name(name) {
   console.log("My cat's name is " + name);
}

Answer 4

简而言之，你必须在使用函数之前定义它，但你可以使用setTimeout函数作为延迟，它将字符串作为exectute的代码：

$(document).ready( function() {

    setTimeOut('openModal()', 2000);

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

});

这将起作用，因为函数直到定义后才被调用。