调用Javascript函数之前是否必须定义它？

如果我在定义之前运行下面的函数，我会得到这个错误

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

} );

---

将函数定义移到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

在同一块中执行任何其他操作之前，都会使用一些技巧来定义函数：

---

将函数分配给变量时，必须先分配函数，然后才能使用变量访问函数

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

$(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（）{

）

简言之，是的，在使用函数之前，您确实需要定义它，但您可以使用setTimeout函数作为延迟，它将字符串作为代码来执行：

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

});

---

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

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

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

表达式函数与减速函数

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

---

这就是一切吗，例如，您是否在该范围之上声明了标识符

openModal

（而不是定义它）？例如

var openModal；

相关：@Rup这是第一次使用openModal在外部定义函数有什么意义？“您必须在引用函数之前定义函数[…]”：不一定。由于函数声明是挂起的，因此您可以在任何位置定义它们，并且当前作用域中的其他代码可以调用它。只有函数表达式被赋值后才能调用。请注意，TJHeuvel指出的内容在您将函数赋给变量时不适用。即使函数对象本身是在代码被解析，并在运行时分配给变量。您的第一个建议不起作用，因为此时您调用`延迟'（OpenModel，2000）

，

openModal`仍保留对空函数的引用。实际函数仅在之后分配，但它不会影响您已传递的值。您的第二个建议只是“错误地”起作用。因为

openModal

不是用

var

声明的，所以它是全局的。但是只要用

var

正确声明它，它就不再工作了，因为

setTimeout

计算全局范围内的字符串（并且

openModal

将是就绪事件处理程序的本地）。