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

Does a Javascript function have to be defined before calling it?

本文关键字：是否 定义 调用 Javascript 函数      更新时间：2023-09-26

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

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( 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() {使该变量成为该函数的本地变量。）

将函数定义移到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中定义了什么？

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

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

表达式函数&减速功能

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-减速函数：用以下语法声明的函数不会立即执行。它们被"保存以供以后使用"，并将在以后调用（调用）时执行。如果在定义它们的位置调用它们的BEFORE或AFTER，这些类型的函数就会起作用。如果你在定义减速功能之前调用它——提升——工作正常。

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

简而言之，是的，在使用函数之前必须定义它，但您可以使用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();
    };  
});

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

相关文章：