Почему этот скрипт работает? (и другие вопросы) [JavaScript]
Для начала я хотел бы сказать, что я новичок в javascript. ОЧЕНЬ новый.
Вопросы, которые у меня есть, касаются этого простого (googled) сценария:
window.onload = function(){
bobby();
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}
}
Конечно, я знаю, ЧТО он делает (он помещает строку «Hello World» в элемент с идентификатором «print»), и он тоже работает. Однако я понятия не имею, ПОЧЕМУ это работает. Если бы я использовал-
window.onload = function(){
function bobby(){
document.getElementById('print').innerHTML = "Hello World"
}
}
или-
window.onload = bobby(){
function bobby() {
document.getElementById('print').innerHTML = "Hello World";
}
}
вместо этого он не будет работать, несмотря на то, что выглядит так, как должен (для первокурсника вроде меня).
Мои вопросы таковы: что происходит за кулисами? Что идет не так / что идет правильно? Есть ли что-то устаревшее/отсутствующее в приведенных выше сценариях? На что я должен обратить внимание? Почему сначала это должна быть функция, почему я не могу использовать только строку, которая фактически выполняет скрипт?
Первый фрагмент работает, потому что bobby() не только объявляется, но и вызывается, в отличие от других фрагментов.
Просто для ясности, хотя комментарий Нико Хаасе отвечает на ваш вопрос, обычно не считается хорошей практикой вызывать функцию до того, как вы ее объявили (что работает только из-за подъема объявления функции). Другими словами, тот фрагмент кода, который вы нашли, не очень хорош.
Рад видеть все ответы, спасибо всем :) И спасибо, что указали, почему это не очень хороший фрагмент Джаред Смит, каждая мелочь помогает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В первом фрагменте кода (который работает) вы объявляете функцию ("function bobby()...") и выполняете ее "bobby();" И все это выполняется анонимной функцией, которая запускается по событию окна загрузки.
Второй фрагмент кода объявляет только функцию bobby().
С третьим я не знаком, но похоже, что вы выполняете функцию bobby(), а внутри нее есть объявление внутренней функции bobby()
Давайте разберемся, почему этот код работает:
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
во втором фрагменте, когда код запускается, только объявляйте функцию, но никогда не запускается.
Функция bobby и bobby call
рассмотрим теперь функциональное выражение
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}
}
Надеюсь, это поможет понять.