在调用之前是否必须定义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中(与大多数语言一样),您必须在引用函数或变量之前定义它.

在你的第一个例子中,你openModal在调用中引用delay(),但是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);
}