在调用它之前是否需要定义一个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做一些挂羊头卖狗肉定义函数之前，什么都在同一块被执行： Why can I use a function before it's defined in Javascript?

Answer 3

在shor牛逼是你必须使用一个函数之前定义它，但你可以使用你的延迟的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(); 
    }; 

}); 

这会工作作为函数不叫，直到在它被定义之后。

Answer 4

我会说，是的。在调用之前，必须定义一个函数。 但有些函数可以被调用（调用）已经被定义之前，他们（吊）

两种不同类型的功能，我想写的是：

表达功能&减速功能

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