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在同一块中执行任何其他操作之前定义函数有一些技巧： Why can I use a function before it's defined in Javascript?

Answer 3

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

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

表达功能＆amp;减速功能

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

});

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

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

4 个答案: