Funktionen

  • Adressname der Version: JavaScript/javascript_guide/Funktionen
  • Titel der Version: Funktionen
  • ID der Version: 331443
  • Erstellt:
  • Autor: eminor
  • Aktuelle Version? Nein
  • Kommentar

Inhalt der Version

Funktionen sind einer der fundamentalen Aufbaublöcke von JavaScript. Eine Funktion ist eine Prozedur - ein Satz von Anweisungen die eine Aufgabe erledigen oder einen Wert berechnen. Damit eine Funktion benutzt werden kann, muss diese im selben Sichtbarkeitsbereich definiert werden, von dem aus sie aufrufbar sein soll.

Definieren von Funktionen

Eine Funktionsdefinition (auch Funktionsdeklaration genannt) setzt sich zusammen aus dem Schlüsselwort function, gefolgt von:

  • Dem Namen der Funktion.
  • Einer Liste von Argumenten, die durch ein Komma getrennt und in Klammern eingeschlossen werden.
  • Den JavaScript Anweisungen, welche definieren, was die Funktion tun soll, eingeschlossen in geschweifte Klammern.

Der folgende Code definiert zum Beispiel eine einfache Funktion square:

function square(number) {
  return number * number;
}

Diese Funktion nimmt ein Argument number entgegen. Die Funktion besteht aus einer Anweisung, die festlegt, dass number mit sich selbst multipliziert und das Ergebnis zurückgeliefert werden soll. Mit dem Schlüsselwort return wird also der Rückgabewert der Funktion festgelegt.

return number * number;

Einfache Parameter (wie z. B. Numbers) werden als Wert (by value) an die Funktion übergeben. Das bedeutet, der Wert wird zwar an die Funktion übergeben, jedoch gelten Änderungen des Werts, die von der Funktion vorgenommen werden, nur innerhalb der Funktion selbst und nicht etwa global oder in der aufrufenden Funktion.

Wird hingegen ein Objekt (z. B. ein nicht-primitiver Wert, wie ein Array oder ein benutzerdefiniertes Objekt) als Parameter an eine Funktion übergeben und Eigenschaften dieses Objekts von der Funktion verändert, so gelten diese Änderungen auch außerhalb der Funktion.

Zum Beispiel:

function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x bekommt den Wert "Honda"

myFunc(mycar);
y = mycar.make;     // y bekommt den Wert "Toyota"
                    // (Die make-Eigenschaft wurde von der Funktion geändert)

Es sei angemerkt, dass die Zuweisung eines neuen Objekts an den Parameter innerhalb der Funktion, das übergebene Objekt nicht verändert, da hierdurch nur der Wert des Parameters selbst geändert wird:

function myFunc(theObject) {
  theObject = {make: "Ford", model: "Focus", year: 2006};
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x bekommt den Wert "Honda"

myFunc(mycar);
y = mycar.make;     // y bekommt noch einmal den Wert "Honda" 

Beim ersten Beispiel wurde das Objekt mycar an die Funktion myFunc übergeben, welche das Objekt veränderte. Beim zweiten Beispiel wurde das übergebene Objekt von der Funktion nicht verändert; stattdessen wurde eine neue lokale Variable mit dem selben Namen erzeugt, was keinen Effekt auf das übergebene Objekt selbst hatte.

Bei JavaScript kann eine Funktion abhängig von einer Bedingung definiert werden:

if (num == 0){
  function myFunc(theObject) {
    theObject.make = "Toyota"
  }
}

Wenn num nicht dem Wert 0 entspricht, wird die Funktion nicht definiert und jeder Versuch eines Aufrufs würde scheitern.

Achtung: ECMAScript erlaubt die Definition von Funktionen in solchem Kontext nicht, sondern nur direkt innerhalb anderer Funktionen beim Top Level eines Skripts. Aus diesem Grund ist das Beispiel nicht korrekt für ECMAScript.

Vorsicht: Die verschiedenen Implemetierungen von JavaScript behandeln dieses Nicht-Standard-Konstrukt unterschiedlich. Beim Schreiben von portablem Code sollte also besser darauf verzichtet werden. Andernfalls kann es passieren, dass der Code nicht in allen Browsern funktioniert.

Neben den hier beschriebenen Möglichkeiten zur Definition von Funktionen kann auch der Function-Konstruktor eingesetzt werden, um Funktionen aus einem String während der Laufzeit zu erzeugen, ähnlich wie bei eval().

Eine Methode ist eine Funktion, die eine Eigenschaft eines Objekts ist. Genauere Informationen findet man unter Arbeiten mit Objekten.

Während die oben beschriebenen Funktionsdeklarationen alle syntaktische Anweisungen sind, können Funktionen auch mit einem Funktionsausdruck erstellt werden. Solch eine Funktion kann anonym sein; sie muss keinen Namen besitzen. Zum Beispiel hätte die Funktion square auch so definiert werden können:

var square = function(number) {return number * number};

Es kann auch ein Name für die Funktion angegeben und die Funktion selbst mit Hilfe dieses Namens innerhalb der Funktion angesprochen werden. Außerdem kann der Funktionsname nützlich sein, um in Stack Traces die Funktion identifizieren zu können:

var factorial = function fac(n) {return n<2 ? 1 : n*fac(n-1)};

print(factorial(3));

Funktionsausdrücke sind praktisch wenn eine Funktion als Argument an eine andere Funktion üergeben werden soll. Das folgende Beispiel zeigt eine Funktion map, die definiert und dann aufgerufen wird, mit einer anonymen Funktion als Parameter.

function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}

Der folgende Code gibt [0, 1, 8, 125, 1000] zurück.

Aufrufen von Funktionen

Bei der Definition einer Funktion wird diese nicht ausgeführt. Bei der Definition wird der Funktion ein Name zugewiesen und der Code festgelegt, der ausgeführt wird, wenn die Funktion aufgerufen wird. Erst beim Aufruf einer Funktion wird der Code ausgeführt. Zum Beispiel kann die Funktion square wie folgt aufgerufen werden:

square(5);

Quelltext der Version

<p>Funktionen sind einer der fundamentalen Aufbaublöcke von JavaScript. Eine Funktion ist eine Prozedur - ein Satz von Anweisungen die eine Aufgabe erledigen oder einen Wert berechnen. Damit eine Funktion benutzt werden kann, muss diese im selben Sichtbarkeitsbereich definiert werden, von dem aus sie aufrufbar sein soll.</p>
<h3 id="Definieren_von_Funktionen">Definieren von Funktionen</h3>
<p>Eine Funktionsdefinition (auch Funktionsdeklaration genannt) setzt sich zusammen aus dem Schlüsselwort <code>function</code>, gefolgt von:</p>
<ul>
  <li>Dem Namen der Funktion.</li>
  <li>Einer Liste von Argumenten, die durch ein Komma getrennt und in Klammern eingeschlossen werden.</li>
  <li>Den JavaScript Anweisungen, welche definieren, was die Funktion tun soll, eingeschlossen in geschweifte Klammern.</li>
</ul>
<p>Der folgende Code definiert zum Beispiel eine einfache Funktion <code>square</code>:</p>
<pre class="brush: js">
function square(number) {
  return number * number;
}
</pre>
<p>Diese Funktion nimmt ein Argument <code>number</code> entgegen. Die Funktion besteht aus einer Anweisung, die festlegt, dass <code>number</code> mit sich selbst multipliziert und das Ergebnis zurückgeliefert werden soll. Mit dem Schlüsselwort <code>return</code> wird also der Rückgabewert der Funktion festgelegt.</p>
<pre class="brush: js">
return number * number;
</pre>
<p>Einfache Parameter (wie z. B. Numbers) werden als Wert (by value) an die Funktion übergeben. Das bedeutet, der Wert wird zwar an die Funktion übergeben, jedoch gelten Änderungen des Werts, die von der Funktion vorgenommen werden, nur innerhalb der Funktion selbst und nicht etwa global oder in der aufrufenden Funktion.</p>
<p>Wird hingegen ein Objekt (z. B. ein nicht-primitiver Wert, wie ein Array oder ein benutzerdefiniertes Objekt) als Parameter an eine Funktion übergeben und Eigenschaften dieses Objekts von der Funktion verändert, so gelten diese Änderungen auch außerhalb der Funktion.</p>
<p>Zum Beispiel:</p>
<pre class="brush: js">
function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x bekommt den Wert "Honda"

myFunc(mycar);
y = mycar.make;     // y bekommt den Wert "Toyota"
                    // (Die make-Eigenschaft wurde von der Funktion geändert)
</pre>
<p>Es sei angemerkt, dass die Zuweisung eines neuen Objekts an den Parameter innerhalb der Funktion, das übergebene Objekt nicht verändert, da hierdurch nur der Wert des Parameters selbst geändert wird:</p>
<pre class="brush: js">
function myFunc(theObject) {
  theObject = {make: "Ford", model: "Focus", year: 2006};
}

var mycar = {make: "Honda", model: "Accord", year: 1998},
    x,
    y;

x = mycar.make;     // x bekommt den Wert "Honda"

myFunc(mycar);
y = mycar.make;     // y bekommt noch einmal den Wert "Honda" 
</pre>
<p>Beim ersten Beispiel wurde das Objekt <code>mycar</code> an die Funktion <code>myFunc </code>übergeben, welche das Objekt veränderte. Beim zweiten Beispiel wurde das übergebene Objekt von der Funktion nicht verändert; stattdessen wurde eine neue lokale Variable mit dem selben Namen erzeugt, was keinen Effekt auf das übergebene Objekt selbst hatte.</p>
<p>Bei JavaScript kann eine Funktion abhängig von einer Bedingung definiert werden:</p>
<pre class="brush: js">
if (num == 0){
  function myFunc(theObject) {
    theObject.make = "Toyota"
  }
}
</pre>
<p>Wenn <code>num</code> nicht dem Wert <code>0</code> entspricht, wird die Funktion nicht definiert und jeder Versuch eines Aufrufs würde scheitern.</p>
<p>Achtung:<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Language_Resources" title="ECMAScript"> ECMAScript</a> erlaubt die Definition von Funktionen in solchem Kontext nicht, sondern nur direkt innerhalb anderer Funktionen beim Top Level eines Skripts. Aus diesem Grund ist das Beispiel nicht korrekt für ECMAScript.</p>
<div class="warning">
  <p><strong>Vorsicht:</strong> Die verschiedenen Implemetierungen von JavaScript behandeln dieses Nicht-Standard-Konstrukt unterschiedlich. Beim Schreiben von portablem Code sollte also besser darauf verzichtet werden. Andernfalls kann es passieren, dass der Code nicht in allen Browsern funktioniert.</p>
</div>
<p>Neben den hier beschriebenen Möglichkeiten zur Definition von Funktionen kann auch der <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Function_Object" title="en-US/docs/JavaScript/Guide/Predefined Core Objects#Function Object"><code>Function</code>-Konstruktor</a> eingesetzt werden, um Funktionen aus einem String während der Laufzeit zu erzeugen, ähnlich wie bei <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Functions#eval_Function" title="en-US/docs/JavaScript/Guide/Functions#eval_Function"><code>eval()</code></a>.</p>
<p>Eine Methode ist eine Funktion, die eine Eigenschaft eines Objekts ist. Genauere Informationen findet man unter <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects" title="en-US/docs/JavaScript/Guide/Working with Objects">Arbeiten mit Objekten</a>.</p>
<p>Während die oben beschriebenen Funktionsdeklarationen alle syntaktische Anweisungen sind, können Funktionen auch mit einem <strong>Funktionsausdruck</strong> erstellt werden. Solch eine Funktion kann <strong>anonym</strong> sein; sie muss keinen Namen besitzen. Zum Beispiel hätte die Funktion <code>square</code> auch so definiert werden können:</p>
<pre class="brush: js">
var square = function(number) {return number * number};</pre>
<p>Es kann auch ein Name für die Funktion angegeben und die Funktion selbst mit Hilfe dieses Namens innerhalb der Funktion angesprochen werden. Außerdem kann der Funktionsname nützlich sein, um in Stack Traces die Funktion identifizieren zu können:</p>
<pre class="brush: js">
var factorial = function fac(n) {return n&lt;2 ? 1 : n*fac(n-1)};

print(factorial(3));
</pre>
<p>Funktionsausdrücke sind praktisch wenn eine Funktion als Argument an eine andere Funktion üergeben werden soll. Das folgende Beispiel zeigt eine Funktion <code>map</code>, die definiert und dann aufgerufen wird, mit einer anonymen Funktion als Parameter.</p>
<pre class="brush: js">
function map(f,a) {
  var result = [], // Create a new Array
      i;
  for (i = 0; i != a.length; i++)
    result[i] = f(a[i]);
  return result;
}
</pre>
<p>Der folgende Code gibt <code>[0, 1, 8, 125, 1000]</code> zurück.</p>
<h3>Aufrufen von Funktionen</h3>
<p>Bei der Definition einer Funktion wird diese nicht ausgeführt. Bei der Definition wird der Funktion ein Name zugewiesen und der Code festgelegt, der ausgeführt wird, wenn die Funktion aufgerufen wird. Erst beim <strong>Aufruf</strong> einer Funktion wird der Code ausgeführt. Zum Beispiel kann die Funktion <code>square</code> wie folgt aufgerufen werden:</p>
<pre class="brush: js">
square(5);
</pre>
Zu dieser Version zurücksetzen