Ziel des Artikels: Den Sinn folgenden Konstrukts verstehen<\/p>\n
\r\n(function(window, document, undefined) {\r\n \/\/some fancy code\r\n})(this, document);\r\n<\/pre>\nMag auf den ersten Blick f\u00fcr den nicht t\u00e4glich mit Javascript schaffenden Menschen be\u00e4ngistend aussehen. Aber der Reihe nach. Eine \u00e4hnliche Konstruktion kommt \u00fcbrigens in jQuery zum Tragen (siehe source<\/a>). <\/p>\nAnonym?<\/h2>\n
Erstmal ist die Funktion anonym, also ohne Namen. Einfach aus dem Grund, weil sie keinen Namen braucht, da sie sich ja selbst aufruft. Man k\u00f6nnte ihr \u00fcbrigens einen Namen geben, funktionieren w\u00fcrde es trotzdem. Vereinfacht sieht das dann z.B. so aus:<\/p>\n
\r\n(function nichtMehrAnonym() {\r\n \/\/some fancy code\r\n})();\r\n<\/pre>\nVorteil: Wenn wir vorhaben, die Funktion aus sich selbst heraus nochmal aufzurufen, ist das so bequemer m\u00f6glich (Rekursion).<\/p>\n
Warum die Parameter?<\/h2>\n
window<\/i> hat innerhalb der Funktion den Wert, den this<\/i> au\u00dferhalb der Funktion hat. Da sich die Funktion im globalen Scope befindet, ist window<\/i> dasselbe wie this<\/i>. Leicht festzustellen hierdurch:<\/p>\n\r\n<script>\r\nalert(this === window); \/\/true\r\n<\/script>\r\n<\/pre>\nMan kann nat\u00fcrlich auch window<\/i> anstelle von this<\/i> schreiben. Selbiges geschieht mit document<\/i>, f\u00fcr das man auch this.document<\/i> schreiben k\u00f6nnte, da das document<\/i> ein Kind des window<\/i> ist.<\/p>\n
\nStellen sich drei Fragen zu den Parametern: <\/b><\/p>\n\n- Warum sollte man sowas tun?<\/li>\n
- Darf man das?<\/li>\n
- Was ist mit undefined?<\/li>\n<\/ol>\n
Antwort zu 1)<\/b>: Hat zwei Gr\u00fcnde. Der erste ist Performance. Man spart sich einen Schritt nach oben im Variablenscope, weil wir nun innerhalb unserer Funktion quasi lokal window<\/i> und document<\/i> rumfliegen haben. Javascript schaut n\u00e4mlich zuerst die lokalen Variablen und dann erst die globalen an, also einen Schritt gespart – auch wenn der Gewinn minimal ist. Der zweite Grund ist: Minification und dadurch Codegr\u00f6\u00dfe. Jage ich den Code durch einen Javascript-Minifier wird daraus z.B.<\/p>\n\r\n(function(w, d, u) {\r\n \/\/some fancy code\r\n})(this, document);\r\n<\/pre>\nWenn ich nun innerhalb meiner Funktion vorher document.getElementById(…)<\/i> hatte, habe ich nun d.getElementById(…). Sch\u00f6n zu sehen im Source von jQuery in der minified-Variante<\/a>.<\/p>\n<\/p>\nAntwort zu 2 und 3)<\/b>: Ja, man darf! <\/p>\n\r\n<script>\r\nalert(typeof undefined); \/\/undefined\r\nundefined = "evil";\r\nalert(typeof undefined); \/\/string\r\n<\/script>\r\n<\/pre>\nNoch Fragen? Mal eiskalt undefined<\/i> \u00fcberschrieben. Und genau das ist auch der Grund, warum undefined<\/i> erwartet, aber beim Aufruf nicht \u00fcbergeben wird. Angenommen ich habe folgendes:<\/p>\n\r\n(function() {\r\n if (x === undefined) {\r\n \/\/...\r\n }\r\n})();\r\n<\/pre>\nJetzt geht jemand daher, und belegt im globalen Scope fr\u00f6hlich undefined<\/i> mit true<\/i>. W\u00fcrde einiges an Verwirrung in meiner Funktion stiften. Deswegen gehen wir auf Nummer sicher und bewahren uns ein „wahres“ undefined<\/i> in unserer Funktion durch einen nicht \u00fcbergebenen Parameter, der auch dann erhalten bleibt wenn jemand au\u00dferhalb Schabernack treibt. Gut, haben wir das mit den Parametern also gekl\u00e4rt.<\/p>\nUnd wozu das Ganze?<\/h2>\n
Erstmal wie angesprochen ein Qu\u00e4ntchen Performance durch einen eingesparten Schritt im Scope. Aber das gr\u00f6\u00dfere Argument ist: Der globale Variablenraum wird nicht mit unn\u00f6tig vielen Variablen verschmutzt. Da alles in einer Funktion gekapselt ist, sind die Variablen lokal, die sonst global w\u00e4ren. So sind z.B. Libraries gut vor \u00dcberschneidungen von internen Variablennamen mit dem Code des Nutzers bewahrt. Und letztlich: Der „Booah, cool“-Effekt<\/b>.<\/p>\nGeht da noch was?<\/h2>\n
Aber ja! Die self-executing-function darf auch flei\u00dfig returnen. Beispiel?<\/p>\n
\r\nvar myvar = (function() {\r\n\treturn "somestuff";\r\n})();\r\n\r\nalert(myvar === "somestuff"); \/\/true\r\n<\/pre>\nCredits an Paul Irish<\/a> f\u00fcr die sehr nett gemachten Screencasts \u00fcber Tricks im jQuery-Source, zu sehen hier<\/a> und hier<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"Ziel des Artikels: Den Sinn folgenden Konstrukts verstehen (function(window, document, undefined) { \/\/some fancy code })(this, document); Mag auf den ersten Blick f\u00fcr den nicht t\u00e4glich mit Javascript schaffenden Menschen be\u00e4ngistend aussehen. Aber der Reihe nach. Eine \u00e4hnliche Konstruktion kommt … Weiterlesen