为什么这个脚本有效?(和其他问题)[JavaScript]

Question

首先，我想说我是javascript的新手。非常新颖。

我的问题是关于这个简单的(谷歌搜索的(脚本：

window.onload = function(){
bobby();
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}
}

我当然知道它的作用(它把字符串"Hello World"放在ID为"print"的元素中(，它也能工作。然而，我不知道它为什么有效。如果我要使用-

window.onload = function(){
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}
}

或-

window.onload = bobby(){
function bobby() {
document.getElementById('print').innerHTML = "Hello World";
}
}

相反，它不会起作用，尽管它看起来应该(对像我这样的大一新生来说(。

我的问题是：幕后发生了什么？哪里出了问题/哪里出了对？上面的脚本中是否有过时/缺失的内容？我应该注意什么？为什么它首先需要是一个函数，为什么我不能只使用实际执行脚本的行？

Answer 1

让我们来解决这个代码工作的原因：

window.onload = function(){
bobby();
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}
}

windows.onload

您可以为windows.onload分配一个函数，在某个时刻(当浏览器卸载完成加载资源时(，它将被调用，类似于windows.onload()

在您的情况下，windows.onload()将使用以下代码执行匿名函数：

function()
{ // from here
bobby();
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}

} // to here

在第二个代码段中，当代码运行时，只声明一个函数，但从不运行。

MDN参考

函数bobby和和bobby调用

现在考虑函数表达式

function(){
bobby();
function bobby(){
// some code
}
}

我怀疑您想知道为什么函数调用在函数声明之前

当一个函数在代码段中像bobby一样声明时，javascript编译器会将声明移动到作用域的开头(提升(，因此当代码运行时是这样运行的：

function(){ // <-function scope beginning
function bobby(){
// some code
}
bobby();
}// <-function scope end

但这只是函数声明中的方式，而不是函数表达式中的方式。考虑一下：

function(){
bobby();
bobby2();
function bobby(){ // some code}
let bobby2 = function(){ // some code}
}

编译后将如下所示：

function(){
function bobby(){ // some code}
let bobby2;
bobby(); // works
bobby2(); // fails because bobby2 is not a function (yet)
bobby2 = function(){ // some code}
}

希望它有助于理解。

Answer 2

在代码的第一个平静(工作(中，您正在声明一个函数("function bobby(("(并执行它"；bobby(("所有这些都是由在onload窗口事件上运行的匿名函数执行的
第二段代码只声明了函数bobby((
第三个我不熟悉，但它看起来像是在执行函数bobby((，其中有一个内部函数bobby((的声明