JavaScript: ¿En qué se diferencia "function onload() {}" de "onload = function() {}"?

Question

En las respuestas a this question, leemos que function f() {} define el nombre localmente, mientras que [var] f = function() {} lo define globalmente. Eso tiene mucho sentido para mí, pero hay un comportamiento extraño que es diferente entre las dos declaraciones.

Hice una página HTML con el guión

onload = function() { 
    alert("hello"); 
} 

y funcionó como se esperaba. Cuando lo cambié a

function onload() { 
    alert("hello"); 
} 

no sucedió nada. (Firefox todavía activó el evento, pero WebKit, Opera e Internet Explorer no lo hicieron, aunque francamente no tengo idea de cuál es la correcta)

En ambos casos (en todos los navegadores), pude verificar que ambos window.onload y onload se establecieron en la función. En ambos casos, el objeto global this se establece en la ventana, y no importa cómo escriba la declaración, el objeto window está recibiendo la propiedad muy bien.

¿Qué está pasando aquí? ¿Por qué una declaración funciona de manera diferente a la otra? ¿Es esto una peculiaridad del lenguaje JavaScript, el DOM o la interacción entre los dos?

Answer 1

Estos dos fragmentos declaran una función en el ámbito actual, llamada "onload". No se realiza ningún enlace.

function onload() { ... } 

.

var onload = function() { ... } 

Este fragmento asigna una función a un/campo de la propiedad/variable denominada "onload" en el ámbito actual:

onload = function() { ... } 

La razón por Firefox lleva a cabo la unión y levantó el proceso de carga en la primera snippet y los demás no podrían ser porque Firefox Chrome (su interfaz de usuario) está escrito y automatizado usando JavaScript, por eso es tan flexible y fácil escribir extensiones en él. De alguna manera, cuando declaraste la función de ámbito local onload de esa manera, Firefox "reemplazó" la implementación de window (muy probablemente el contexto local en ese momento) de onload (en ese momento, una función vacía o indefinida), cuando el otro los navegadores correctamente "sandboxed" la declaración en otro ámbito (por ejemplo, global o algo así).

Answer 2

var onload = function() { 
    alert("hello"); 
} 

Lo declararán localmente también.

sugiero que lea este artículo muy útil: http://kangax.github.io/nfe/

Answer 3

Muchas personas están apuntando correctamente a la diferencia/local global entre (ACTUALIZACIÓN: Esas respuestas en su mayoría han sido retirados por sus autores ahora)

var x = function() { 

y

function x() { 

Pero eso no responde a su realidad pregunta específica ya que en realidad no estás haciendo el primero de estos.

La diferencia entre los dos en el ejemplo es:

// Adds a function to the onload event 
onload = function() { 
    alert("hello"); 
} 

Mientras

// Declares a new function called "onload" 
function onload() { 
    alert("hello"); 
} 

Answer 4

Esto es lo que creo que está pasando, sobre la base de votos comentarios de Tim abajo y una breve discusión con Jonathan Penn :

Cuando el intérprete de JavaScript se asigna a la propiedad window.onload, está hablando con un objeto que el navegador le ha proporcionado. El organismo que invoca se da cuenta de que la propiedad se llama onload, por lo que se dirige al resto del navegador y conecta el evento apropiado. Todo esto está fuera del alcance de JavaScript: el script solo ve que la propiedad se ha configurado.

Cuando se escribe una declaración function onload() {}, el colocador no se llama de la misma manera.Dado que la declaración hace que una asignación ocurra en parse tiempo, no en tiempo de evaluación, el intérprete de guiones sigue adelante y crea la variable sin indicarle al navegador; o si no, el objeto ventana no está listo para recibir eventos. Sea lo que sea, el navegador no tiene la oportunidad de ver la asignación como lo hace cuando escribe onload = function() {}, que pasa por la rutina de establecimiento normal.

Answer 5

Esto genera un error:

foo(); 
var foo = function(){}; 

Esto no es así:

foo(); 
function foo(){} 

La segunda sintaxis es por lo tanto más agradable cuando se está utilizando funciones de modularizar y organizar su código, mientras que la primera la sintaxis es más agradable para el paradigma de las funciones como datos.

Answer 6

La explicación más simple:

function aaaaaaa(){ 

Puede ser utilizado antes de que se declarated:

aaaaaaa(); 
function aaaaaaa(){ 

} 

Pero esto no funciona:

aaaaaaa(); 
aaaaaaa=function(){ 

} 

Eso es porque en el tercer código , estás asignando aaaaaaa a una función anónima, no declarando como una función.