JavaScript: Wie ist „Funktion onload () {}“ unterscheidet sich von „onload = function () {}“?

Question

In den Antworten auf diese Frage href="https://stackoverflow.com/questions/336859/javascript-var-functionname-function-vs-function-functionname"> function f() {} lokal definiert den Namen, während [var] f = function() {} es global definiert. Das macht Sinn für mich, aber es gibt einige seltsame Verhalten, das zwischen den beiden Erklärungen anders ist.

ich eine HTML-Seite mit dem Skript gemacht

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

und es funktioniert wie erwartet. Als ich änderte es zu

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

nichts passiert ist. (Firefox feuerte noch das Ereignis, aber WebKit, Opera und Internet Explorer nicht, obwohl ehrlich gesagt habe ich keine Ahnung, was richtig ist.)

In beiden Fällen (in allen Browsern), kann ich feststellen, ob beide window.onload und onload auf die Funktion gesetzt wurden. In beiden Fällen wird das globale Objekt this zum Fenster gesetzt, und ich, egal wie ich die Erklärung zu schreiben, wird das window Objekt empfängt die Eigenschaft nur in Ordnung.

Was ist denn hier los? Warum funktioniert eine Erklärung Arbeit anders als die anderen? Ist das eine Marotte der JavaScript-Sprache, das DOM oder die Wechselwirkung zwischen den beiden?

Answer 1

Diese zwei Schnipsel deklarieren eine Funktion im aktuellen Bereich, mit dem Namen „onload“. Keine Bindung erfolgt.

function onload() { ... }

.

var onload = function() { ... }

zuordnet Dieser Code-Schnipsel, eine Funktion zu einer Eigenschaft / Variable / Feld mit dem Namen „onload“ auf dem aktuellen Bereich:

onload = function() { ... }

Der Grund, warum Firefox die Bindung und hob das Onload-Ereignis auf dem ersten Schnipsel und die andere durchgeführt haben werden, nicht vielleicht, weil die Firefox Chrom (seine Benutzeroberfläche) selbst geschrieben und automatisiert mit Hilfe von JavaScript - das ist, warum es so flexibel ist und einfache Erweiterungen auf, es zu schreiben. Irgendwie, wenn Sie die lokal scoped onload Funktion auf diese Weise erklärt, Firefox „ersetzt“ die window der (höchstwahrscheinlich die lokalen Kontext zu der Zeit) Umsetzung von onload (zu diesem Zeitpunkt eine leere Funktion oder nicht definiert ist), wenn die anderen Browsern korrekt „Sandbox“, die Erklärung in einem anderen Rahmen (sagen wir, global oder etwas).

Answer 2

Viele Menschen sind unter Hinweis darauf, korrekt die globale / lokale Differenz zwischen ( UPDATE: Diese Antworten werden zumeist von ihren Autoren entfernt wurden jetzt )

var x = function() {

und

function x() {

Aber das ist nicht wirklich Ihre Frage beantworten, wie Sie sind eigentlich nicht den ersten davon zu tun.

Der Unterschied zwischen den beiden in Ihrem Beispiel ist:

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

Die

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

Answer 3

Hier ist, was ich denke, vor sich geht, basierend auf Tim Down hilfreiche Kommentare und einer kurzen Diskussion mit Jonathan Penn:

Wenn die JavaScript-Interpreter zur window.onload Eigenschaft zuordnet, spricht es zu einem Objekt, dass der Browser ihm gegeben hat. Der Setter, dass es ruft bemerkt, dass die Eigenschaft onload genannt wird, und geht so aus dem Rest des Browsers und die Leitungen der entsprechende Ereignis auf. All dies außerhalb des Rahmens JavaScript ist -. Das Skript sieht nur, dass die Eigenschaft festgelegt wurde

Wenn Sie eine Erklärung function onload() {} schreiben, wird der Setter nicht in genau der gleichen Weise aufgerufen. Da die Erklärung passieren eine Zuordnung verursacht Parst Zeit, nicht Auswertungszeit, geht die Skript-Interpreter vor und erstellt die Variable ohne den Browser zu sagen; oder auch das Fensterobjekt ist nicht bereit, Ereignisse zu empfangen. Was immer es ist, wird der Browser nicht die Chance bekommen, um die Zuordnung zu sehen, wie es funktioniert, wenn Sie schreiben onload = function() {}, die über die normalen Setter Routine geht.

Answer 4

Die einfachste Erklärung:

function aaaaaaa(){

Kann verwendet werden, bevor es declarated ist:

aaaaaaa();
function aaaaaaa(){

}

Aber das funktioniert nicht:

aaaaaaa();
aaaaaaa=function(){

}

Das ist, weil im dritten Code, Sie AAAAAAA auf eine anonyme Funktion zuweisen, nicht als Funktion erklärt.

Answer 5

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

Wird es erklärt lokal zu.

Ich schlage vor, Sie diese sehr hilfreich Artikel zu lesen: http://kangax.github.io/nfe/

Answer 6

Dies erzeugt einen Fehler:

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

Dies gilt nicht:

foo();
function foo(){}

Die zweite Syntax ist also schöner, wenn Sie Funktionen verwenden Sie den Code modularisieren und zu organisieren, während die erste Syntax ist schöner für die Funktionen-as-Daten Paradigma.