path: root/files/de/web/javascript/reference/global_objects/function/index.html

---
title: Function
slug: Web/JavaScript/Reference/Global_Objects/Function
tags:
  - Constructor
  - Function
  - JavaScript
translation_of: Web/JavaScript/Reference/Global_Objects/Function
---
<div>{{JSRef}}</div>

<p>Der <strong><code>Function</code> Konstruktor </strong>erstellt ein neues <code>Funktion</code> Objekt. Das direkte Aufrufen kann Funktionen dynamisch erstellen, hat aber Sicherheits- und Performanceprobleme genau wie der Einsatz von {{jsxref("eval")}}. Im Gegensatz zu <code>eval</code> ermöglicht der Function-Konstruktor die Ausführung von Code im globalen Gültigkeitsbereich, was zu besseren Programmiergewohnheiten führt und eine effizientere Code-Minimierung ermöglicht.</p>

<div>{{EmbedInteractiveExample("pages/js/function-constructor.html")}}</div>



<p>Jede JavaScript Funktion ist aktuell ein <code>Function</code> Objekt. Das kann mit dem Code <code>(function(){}).constructor === Function</code> gezeigt werden, der <code>true</code> zurückgibt.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox"><code>new Function ([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</code></pre>

<h3 id="Parameters" name="Parameters">Parameter</h3>

<dl>
 <dt><code>arg1, arg2, ... arg<em>N</em></code></dt>
 <dd>Namen die von der Funktion als formelle Argumentname genutzt werden. Jeder davon muss ein String sein, welcher ein gültiger JavaScript Bezeichner ist oder einer Liste von solchen Strings, getrennt mit Kommata ist. Zum Beispiel: "<code>x</code>", "<code>derWert</code>", oder "<code>a,b</code>".</dd>
 <dt><code>functionBody</code></dt>
 <dd>Ein String, welcher den JavaScript Ausdruck als Funktions-Definition beinhaltet.</dd>
</dl>

<h2 id="Description" name="Description">Beschreibung</h2>

<p>Mit dem <code>Function</code> Konstruktor erstellte <code>Function</code>-Objekte werden übersetzt, sobald die Funktion erstellt wurde. Das ist weniger effizient, als wenn man eine Funktion als <a href="/de/docs/Web/JavaScript/Reference/Operators/function">Funktionsausdruck</a> oder <a href="/de/docs/Web/JavaScript/Reference/Statements/function">Funktionsstatement</a> deklariert und diese innerhalb des Codes abruft, weil diese mit dem Rest des Codes übersetzt werden.</p>

<p>Alle der Funktion übergegebenen Argumente werden als Namen der Bezeichner der Parameter in der zu erstellenden Funktion in der angegebenen Reihenfolge behandelt.</p>

<p>Das Aufrufen des <code>Function</code> Konstruktors als Funktion (ohne den <code>new</code> Operator) hat dieselbe Wirkung, wie als Konstrukteuraufruf. Jedoch kann das Weglassen des <code>new</code> Operators eine kleinere minimierten Codegröße (4 Byte kleiner) erreichen, so dass es besser ist <code>Function</code> ohne <code>new</code> zu benutzen.</p>

<h2 id="Eigenschaften_und_Methoden_von_Function">Eigenschaften und Methoden von <code>Function</code></h2>

<p>Das globale <code>Function</code> Objekt hat eigene Methoden und Eigenschaften, doch, da es eine Funktion selbst ist, erbt es einige Methoden und Eigenschaften durch die Prototypkette aus {{jsxref("Function.prototype")}}.</p>

<h2 id="Function_Prototyp_Objekt"><code>Function</code> Prototyp Objekt</h2>

<h3 id="Eigenschaften">Eigenschaften</h3>

<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Eigenschaften')}}</div>

<h3 id="Methods" name="Methods">Methoden</h3>

<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype', 'Methoden')}}</div>

<h2 id="Function_instances" name="Function_instances"><code>Function</code> Instanzen</h2>

<p>Funktions-Instanzen erben Methoden und Eigenschaften vom {{jsxref("Function.prototype")}}. Wie bei allen Konstruktoren kann das Prototypen Objekt verändern werden, um Änderungen an allen Funktions-Instanzen durchzuführen.</p>

<h2 id="Examples" name="Examples">Beispiele</h2>

<h3 id="Example.3A_Specifying_arguments_with_the_Function_constructor" name="Example.3A_Specifying_arguments_with_the_Function_constructor">Spezifizieren von Argumente mit dem <code>Function</code> Konstruktor</h3>

<p>Der folgende Code erstellt ein Funktions-Objekt, mit zwei Argumenten.</p>

<pre class="brush: js">// Das Beispiel kann direkt in der JavaScript Console ausgeführt werden.

// Erstellt eine Funktion mit zwei Argumenten und gibt die Summe dieser Argumente zurück
var adder = new Function('a', 'b', 'return a + b');

// Aufruf der Funktion
adder(2, 6);
// &gt; 8
</pre>

<p>Die Argumente "a" und "b" sind formale Argument-Namen, welche im Funktionskörper genutzt werden, "<code>return a + b</code>".</p>

<h3 id="Unterschiede_zwischen_dem_Function_Konstruktor_und_Funktionsdeklarationen">Unterschiede zwischen dem <code>Function</code> Konstruktor und Funktionsdeklarationen</h3>

<p>Funktionen, die mit dem <code>Function</code> Konstruktor erstellt werden, erstellen keine Closures in ihrem Erstellungskontext; Sie werden immer im globalen Scope erstellt. Wenn diese ausgeführt wird, kann sie nur auf eigene lokale oder globale Variablen zugreifen, jedoch nicht auf die aus dem Erstellungskontext des <code>Function</code> Konstruktor aufzufes. Dieses ist der Unterschied zum Einsatz von {{jsxref("eval")}} mit Quelltext für einen Funktionsausdruck.</p>

<pre class="brush: js">var x = 10;

function createFunction1() {
    var x = 20;
    return new Function('return x;'); // this |x| refers global |x|
}

function createFunction2() {
    var x = 20;
    function f() {
        return x; // this |x| refers local |x| above
    }
    return f;
}

var f1 = createFunction1();
console.log(f1());          // 10
var f2 = createFunction2();
console.log(f2());          // 20
</pre>

<p>Der "richtige" Weg für das Ausführen von externen Code mit <code>Function</code> (Für maximale Minimierung).</p>

<pre class="brush: js">function makeFunction(code){
    return Funktion('"use strict";return ' + code)();
}
var add = makeFunktion(
  "" + function(a, b, c){ return a + b + c } // dieser Code ist in einer seperaten Datei irgendwo im Produktivprogramm
)
console.log( add(1, 2, 3) );  // gibt sechs aus
</pre>

<p>Zu beachten ist, dass der obere Code komplett unpraktikabel ist. Man sollte <code>Function</code> niemals so missbrauchen. Stattdessen ist der obere Code nur als vereinfachtes Beispiel für eine Art Modulloader zu sehen, wobei es ein Basisskript gibt, welches dann hunderte von großen optionalen Modulen lädt. Dadurch muss ein Benutzer nicht lange warten, bis alle Module heruntergeladen sind, sondern der Clientcomputer lädt nur die benötigten Module und eine Seite lädt schneller. Dabei wird es beim auswerten von vielen Funktionen empfohlen, sie gebündelt zu übersetzen anstatt jede einzeln.</p>

<pre class="brush: js">function bulkMakeFunctions(){
    var str = "", i = 1, Len = arguments.length;
    if(Len) {
        str = arguments[0];
        while (i !== Len) str += "," + arguments[i], ++i;
    }
    return Funktion('"use strict";return[' + str + ']')();
}
const [
    add,
    sub,
    mul,
    div
] = bulkMakeFunctions(
    "function(a,b){return a+b}",
    "function(a,b){return a-b}",
    "function(a,b){return a*b}",
    "function(a,b){return a/b}"
);
console.log(sub(add(mul(4, 3), div(225, 5)), 7));
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Initiale Definition. Implementiert in JavaScript 1.0.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.3', 'Function')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-function-objects', 'Function')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>


<p>{{Compat("javascript.builtins.Function")}}</p>
</div>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{jsxref("Functions", "Functions and function scope")}}</li>
 <li>{{jsxref("Function")}}</li>
 <li>{{jsxref("Statements/function", "function statement")}}</li>
 <li>{{jsxref("Operators/function", "function expression")}}</li>
 <li>{{jsxref("Statements/function*", "function* statement")}}</li>
 <li>{{jsxref("Operators/function*", "function* expression")}}</li>
 <li>{{jsxref("AsyncFunction")}}</li>
 <li>{{jsxref("GeneratorFunction")}}</li>
</ul>