在調用之前是否必須定義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();
    };  

});

這將起作用，因為函數直到定義后才被調用。