So verwenden Sie ES6-Argumente und -Parameter
Veröffentlicht: 2022-03-10ECMAScript 6 (oder ECMAScript 2015) ist die neueste Version des ECMAScript-Standards und hat die Parameterbehandlung in JavaScript erheblich verbessert. Wir können jetzt neben anderen neuen Funktionen Ruheparameter, Standardwerte und Destrukturierung verwenden.
In diesem Tutorial werden wir Argumente und Parameter im Detail untersuchen und sehen, wie ECMAScript 6 sie aktualisiert hat.
Argumente versus Parameter
Argumente und Parameter werden oft synonym bezeichnet. Dennoch werden wir für die Zwecke dieses Tutorials eine Unterscheidung treffen. In den meisten Standards werden Parameter (oder formale Parameter) in der Funktionsdeklaration angegeben, und Argumente (oder tatsächliche Parameter) werden an die Funktion übergeben. Betrachten Sie diese Funktion:
function foo(param1, param2) { // do something } foo(10, 20);
In dieser Funktion sind param1
und param2
Funktionsparameter und die an die Funktion übergebenen Werte ( 10
und 20
) sind Argumente.
Spread-Operator (…)
In ECMAScript 5 ist die apply()
Methode ein bequemes Werkzeug, um ein Array als Argumente an eine Funktion zu übergeben. Beispielsweise wird es häufig mit der Methode Math.max()
verwendet, um den höchsten Wert in einem Array zu finden. Betrachten Sie dieses Codefragment:
var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50
Die Methode Math.max()
unterstützt keine Arrays; es akzeptiert nur Zahlen. Wenn ein Array an die Math.max()
-Funktion übergeben wird, wird ein Fehler ausgegeben. Aber wenn die apply()
Methode verwendet wird, wird das Array als einzelne Zahlen gesendet, sodass die Math.max()
Methode damit umgehen kann.
Glücklicherweise müssen wir mit der Einführung des Spread-Operators in ECMAScript 6 die apply()
Methode nicht mehr verwenden. Mit dem Spread-Operator können wir einen Ausdruck einfach in mehrere Argumente erweitern:
var myArray = [5, 10, 50]; Math.max(...myArray); // 50
Hier erweitert der Spread-Operator myArray
, um einzelne Werte für die Funktion zu erstellen. Während die Simulation des Spread-Operators mit apply()
in ECMAScript 5 möglich ist, ist die Syntax verwirrend und es fehlt die Flexibilität des Spread-Operators. Der Spread-Operator ist nicht nur einfacher zu bedienen, sondern bietet auch mehr Funktionen. Beispielsweise kann es mehrfach verwendet und mit anderen Argumenten in einem function
gemischt werden:
function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25
Ein weiterer Vorteil des Spread-Operators ist, dass er einfach mit Konstruktoren verwendet werden kann:
new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Natürlich könnten wir den vorangehenden Code in ECMAScript 5 umschreiben, aber wir müssten ein kompliziertes Muster verwenden, um einen Typfehler zu vermeiden:
new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Spread-Operator-Browser-Unterstützung in Funktionsaufrufen
Desktop-Browser:
Chrom | Feuerfuchs | Internet Explorer | Microsoft Edge | Oper | Safari |
---|---|---|---|---|---|
46 | 27 | – | Unterstützt | – | 7.1 |
Mobile Browser:
Chrome für Android | Firefox-Mobil | Safari-Mobil | Opera Mobile | IE Mobil |
---|---|---|---|---|
46 | 27 | 8 | – | – |
Ruheparameter
Der rest-Parameter hat die gleiche Syntax wie der Spread-Operator, aber anstatt ein Array in Parameter zu erweitern, sammelt er Parameter und wandelt sie in ein Array um.
function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]
Wenn keine Argumente vorhanden sind, wird der rest-Parameter auf ein leeres Array gesetzt:
function myFunction(...options) { return options; } myFunction(); // []
Ein rest-Parameter ist besonders nützlich, wenn Sie eine variadische Funktion erstellen (eine Funktion, die eine variable Anzahl von Argumenten akzeptiert). Rest-Parameter haben den Vorteil, dass sie Arrays sind, und können problemlos das arguments
-Objekt ersetzen (was wir später in diesem Tutorial erklären werden). Betrachten Sie diese in ECMAScript 5 geschriebene Funktion:
function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Diese Funktion prüft, ob ein String mehrere Teilstrings enthält. Das erste Problem bei dieser Funktion besteht darin, dass wir in den Rumpf der function
schauen müssen, um zu sehen, dass sie mehrere Argumente akzeptiert. Das zweite Problem ist, dass die Iteration bei 1
statt bei 0
beginnen muss, da arguments[0]
auf das erste Argument zeigt. Wenn wir später entscheiden, einen weiteren Parameter vor oder nach der Zeichenfolge hinzuzufügen, vergessen wir möglicherweise, die Schleife zu aktualisieren. Mit den restlichen Parametern vermeiden wir diese Probleme leicht:
function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Die Ausgabe dieser Funktion ist die gleiche wie die vorherige. Auch hier wird der Parameterstring mit dem zuerst übergebenen string
gefüllt, aber die restlichen Argumente werden in einem Array abgelegt und der Variablen keys
zugewiesen.
Die Verwendung des rest-Parameters anstelle des arguments
-Objekts verbessert die Lesbarkeit des Codes und vermeidet Optimierungsprobleme in JavaScript. Dennoch ist der Ruheparameter nicht ohne Einschränkungen. Beispielsweise muss es das letzte Argument sein; Andernfalls tritt ein Syntaxfehler auf:
function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Eine weitere Einschränkung besteht darin, dass in der function
nur ein rest-Parameter zulässig ist:
function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Rest-Parameter-Browser-Unterstützung
Desktop-Browser:
Chrom | Feuerfuchs | Internet Explorer | Microsoft Edge | Oper | Safari |
---|---|---|---|---|---|
47 | fünfzehn | – | Unterstützt | 34 | – |
Mobile Browser:
Chrome für Android | Firefox-Mobil | Safari-Mobil | Opera Mobile | IE Mobil |
---|---|---|---|---|
47 | fünfzehn | – | – | – |
Standardparameter
Standardparameter in ECMAScript 5
JavaScript unterstützt keine Standardparameter in ECMAScript 5, aber es gibt eine einfache Problemumgehung. Mit einem logischen OR
Operator ( ||
) innerhalb der Funktion können wir einfach Standardparameter in ECMAScript 5 simulieren. Betrachten Sie diese Funktion:
function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10
Diese Funktion erwartet zwei Argumente, aber wenn sie ohne Argumente aufgerufen wird, verwendet sie die Standardwerte. Innerhalb der Funktion werden fehlende Argumente automatisch auf undefiniert gesetzt; Daher können wir diese Argumente erkennen und Standardwerte für sie deklarieren. Um fehlende Argumente zu erkennen und Standardwerte festzulegen, verwenden wir den logischen OR
-Operator ( ||
). Dieser Operator untersucht sein erstes Argument: Wenn es wahr ist, gibt der Operator es zurück; Ist dies nicht der Fall, gibt der Operator sein zweites Argument zurück.
Dieser Ansatz wird häufig in Funktionen verwendet, hat aber einen Fehler. Das Übergeben von 0
oder null
löst ebenfalls einen Standardwert aus, da diese als falsche Werte betrachtet werden. Wenn wir also tatsächlich 0
oder null
an diese Funktion übergeben müssen, bräuchten wir eine alternative Methode, um zu prüfen, ob ein Argument fehlt:
function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10
Innerhalb dieser Funktion werden die Typen der übergebenen Argumente überprüft, um sicherzustellen, dass sie nicht definiert sind, bevor Standardwerte zugewiesen werden. Dieser Ansatz erfordert nur etwas mehr Code, ist aber eine sicherere Alternative und ermöglicht es uns, 0
und null
an die Funktion zu übergeben.
Standardparameter in ECMAScript 6
Mit ECMAScript 6 müssen wir nicht mehr nach undefinierten Werten suchen, um Standardparameter zu simulieren. Wir können jetzt Standardwerte direkt in die function
einfügen:
function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null
Wie Sie sehen können, löst das Weglassen eines Arguments den Standardwert aus, aber das Übergeben von 0
oder null
nicht. Wir können sogar Funktionen verwenden, um Werte für Standardparameter abzurufen:
function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)
Beachten Sie, dass die getParam
Funktion nur aufgerufen wird, wenn das zweite Argument weggelassen wird. Wenn wir also die Funktion multiply()
mit zwei Parametern aufrufen, wird die Warnung nicht angezeigt.
Ein weiteres interessantes Merkmal von Standardparametern ist, dass wir in der function
auf andere Parameter und Variablen verweisen können:
function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4
Sie können sogar Operationen in der function
ausführen:
function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36
Beachten Sie, dass JavaScript im Gegensatz zu einigen anderen Sprachen Standardparameter zum Zeitpunkt des Aufrufs auswertet:
function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]
Standard-Parameter-Browser-Unterstützung
Desktop-Browser:
Feature | Chrom | Feuerfuchs | Internet Explorer | Microsoft Edge | Oper | Safari |
---|---|---|---|---|---|---|
Grundlegende Unterstützung | 49 | fünfzehn | – | 14 | – | – |
Parameter ohne Standardwerte nach Standardparameter | 49 | 26 | – | 14 | – | – |
Mobile Browser:
Feature | Chrome für Android | Firefox-Mobil | Safari-Mobil | Opera Mobile | IE Mobil |
---|---|---|---|---|---|
Grundlegende Unterstützung | 49 | fünfzehn | – | – | – |
Parameter ohne Standardwerte nach Standardparameter | 46 | 26 | – | – | – |
Destrukturieren
Die Destrukturierung ist eine neue Funktion in ECMAScript 6, die es uns ermöglicht, Werte aus Arrays und Objekten zu extrahieren und sie mithilfe einer Syntax, die Objekt- und Array-Literalen ähnelt, Variablen zuzuweisen. Die Syntax ist klar und leicht verständlich und ist besonders nützlich, wenn Argumente an eine Funktion übergeben werden.
In ECMAScript 5 wird ein Konfigurationsobjekt häufig verwendet, um eine große Anzahl optionaler Parameter zu handhaben, insbesondere wenn die Reihenfolge der Eigenschaften keine Rolle spielt. Betrachten Sie diese Funktion:
function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);
Dieses Muster wird häufig von JavaScript-Entwicklern verwendet und funktioniert gut, aber wir müssen in den function
schauen, um zu sehen, welche Parameter erwartet werden. Mit destrukturierten Parametern können wir die Parameter in der function
eindeutig angeben:

function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);
In dieser Funktion haben wir anstelle eines Konfigurationsobjekts ein Objektdestrukturierungsmuster verwendet. Das macht unsere Funktion nicht nur übersichtlicher, sondern auch lesbarer.
Wir können auch destrukturierte Parameter mit regulären kombinieren:
function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);
Beachten Sie, dass ein Typfehler ausgelöst wird, wenn Parameter im function
weggelassen werden:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'
Dies ist das gewünschte Verhalten, wenn Parameter erforderlich sein müssen, aber was ist, wenn wir möchten, dass sie optional sind? Um diesen Fehler bei fehlenden Parametern zu vermeiden, müssen wir destrukturierten Parametern einen Standardwert zuweisen:
function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error
In dieser Funktion wird ein leeres Objekt als Standardwert für die destrukturierten Parameter bereitgestellt. Wenn diese Funktion nun ohne Parameter aufgerufen wird, tritt kein Fehler auf.
Wir können jedem destrukturierten Parameter auch einen Standardwert zuweisen:
function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }
In diesem Beispiel hat jede Eigenschaft einen Standardparameter, sodass wir nicht manuell nach undefinierten Parametern suchen und Standardwerte innerhalb des function
zuweisen müssen.
Destrukturierung der Browserunterstützung
Desktop-Browser:
Feature | Chrom | Feuerfuchs | Internet Explorer | Microsoft Edge | Oper | Safari |
---|---|---|---|---|---|---|
Grundlegende Unterstützung | 49 | 2.0 | – | 14 | – | 7.1 |
Destrukturierter Parameter mit Defaultwertzuweisung | 49 | 47 | – | 14 | – | – |
Mobile Browser:
Feature | Chrome für Android | Firefox-Mobil | Safari-Mobil | Opera Mobile | IE Mobil |
---|---|---|---|---|---|
Grundlegende Unterstützung | 49 | 1 | 8 | – | – |
Parameter ohne Standardwerte nach Standardparameter | 49 | 47 | – | – | – |
Argumente übergeben
Es gibt zwei Möglichkeiten, Argumente an eine Funktion zu übergeben: per Referenz oder per Wert. Das Ändern eines Arguments, das als Referenz übergeben wird, wird global widergespiegelt, aber das Ändern eines Arguments, das als Wert übergeben wird, wird nur innerhalb der Funktion widergespiegelt.
In einigen Sprachen wie Visual Basic und PowerShell haben wir die Möglichkeit anzugeben, ob ein Argument als Referenz oder als Wert übergeben werden soll, aber das ist bei JavaScript nicht der Fall.
Übergabe von Argumenten nach Wert
Technisch gesehen kann JavaScript nur als Wert übergeben werden. Wenn wir ein Argument als Wert an eine Funktion übergeben, wird eine Kopie dieses Werts innerhalb des function
erstellt. Daher werden alle Änderungen am Wert nur innerhalb der function
widergespiegelt. Betrachten Sie dieses Beispiel:
var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5
Hier hat das Ändern des Arguments innerhalb der Funktion keine Auswirkung auf den ursprünglichen Wert. Wenn also die Variable von außerhalb der Funktion protokolliert wird, ist der gedruckte Wert immer noch 5
.
Übergabe von Argumenten per Referenz
In JavaScript wird alles als Wert übergeben, aber wenn wir eine Variable übergeben, die auf ein Objekt verweist (einschließlich Arrays), ist der „Wert“ eine Referenz auf das Objekt, und das Ändern einer Eigenschaft eines Objekts, auf das durch eine Variable verwiesen wird, ändert das zugrundeliegendes Objekt.
Betrachten Sie diese Funktion:
function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value
Wie Sie sehen können, wird die Eigenschaft des Objekts innerhalb der Funktion geändert, aber der geänderte Wert ist außerhalb der Funktion sichtbar.
Wenn wir einen nicht primitiven Wert wie ein Array oder Objekt übergeben, wird im Hintergrund eine Variable erstellt, die auf den Speicherort des ursprünglichen Objekts im Speicher zeigt. Diese Variable wird dann an die Funktion übergeben, und ihre Änderung wirkt sich auf das ursprüngliche Objekt aus.
Geben Sie Überprüfung und fehlende oder zusätzliche Parameter ein
In einer stark typisierten Sprache müssen wir den Parametertyp in der function
angeben, aber JavaScript fehlt diese Funktion. In JavaScript spielt es keine Rolle, welche Art von Daten oder wie viele Argumente wir an eine Funktion übergeben.
Angenommen, wir haben eine Funktion, die nur ein Argument akzeptiert. Wenn wir diese Funktion aufrufen, sind wir nicht darauf beschränkt, nur ein Argument an die Funktion zu übergeben; es steht uns frei, ein, zwei oder mehr Argumente weiterzugeben! Wir können uns sogar dafür entscheiden, überhaupt nichts weiterzugeben, und es werden keine Fehler auftreten.
Die Anzahl der Argumente und Parameter kann sich auf zwei Arten unterscheiden:
- Weniger Argumente als Parameter .
Die fehlenden Parameter entsprechenundefined
. - Mehr Argumente als Parameter .
Die zusätzlichen Parameter werden ignoriert, können aber über die speziellen Array-ähnlichen Variablenargumente abgerufen werden (wird als nächstes besprochen).
Obligatorische Argumente
Fehlt ein Argument in einem function
, wird es auf undefined
gesetzt. Wir können dieses Verhalten ausnutzen und einen Fehler ausgeben, wenn ein Argument weggelassen wird:
function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }
In ECMAScript 6 können wir dies weiterführen und Standardparameter verwenden, um obligatorische Argumente festzulegen:
function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter
Argumente-Objekt
Die Unterstützung für rest-Parameter wurde ECMAScript 4 mit der Absicht hinzugefügt, das arguments
-Objekt zu ersetzen, aber ECMAScript 4 kam nie zum Tragen. Mit der Veröffentlichung von ECMAScript 6 unterstützt JavaScript nun offiziell die restlichen Parameter. Es hat auch den Plan zunichte gemacht, die Unterstützung für das arguments
-Objekt einzustellen.
Das arguments
-Objekt ist ein Array-ähnliches Objekt, das in allen Funktionen verfügbar ist. Es ermöglicht, dass die an die Funktion übergebenen Werte des argument
nach Nummer statt nach Name abgerufen werden. Das Objekt ermöglicht es uns, eine beliebige Anzahl von Argumenten an eine Funktion zu übergeben. Betrachten Sie das folgende Codefragment:
function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);
Diese Funktion erwartet, nur ein Argument zu erhalten. Wenn wir es mit zwei Argumenten aufrufen, ist das erste Argument in der Funktion über den Parameternamen param1
oder das Argumentobjekt arguments[0]
zugänglich, aber das zweite Argument ist nur als arguments[1]
zugänglich. Beachten Sie auch, dass das arguments
Objekt in Verbindung mit benannten Argumenten verwendet werden kann.
Das arguments
-Objekt enthält einen Eintrag für jedes Argument, das an die Funktion übergeben wird, und der Index des ersten Eintrags beginnt bei 0
. Wenn wir im obigen Beispiel auf mehr Argumente zugreifen wollten, würden wir arguments[2]
, arguments[3]
und so weiter schreiben.
Wir könnten sogar das Setzen benannter Parameter ganz überspringen und einfach das arguments
Objekt verwenden:
function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6
Tatsächlich sind benannte Parameter eine Annehmlichkeit, keine Notwendigkeit. Ebenso können die restlichen Parameter verwendet werden, um die übergebenen Argumente widerzuspiegeln:
function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);
Das arguments
-Objekt ist ein Array-ähnliches Objekt, aber es fehlen Array-Methoden wie slice()
und foreach()
. Um Array-Methoden auf das arguments
-Objekt anzuwenden, muss das Objekt zunächst in ein echtes Array konvertiert werden:
function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
In dieser Funktion wird Array.prototype.slice.call()
verwendet, um das arguments
-Objekt schnell in ein Array umzuwandeln. Als nächstes sortiert die Methode sort()
die Elemente des Arrays und gibt sie zurück.
ECMAScript 6 hat einen noch einfacheren Weg. Array.from()
, eine neue Ergänzung in ECMAScript 6, erstellt ein neues Array aus einem beliebigen Array-ähnlichen Objekt:
function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Die Längeneigenschaft
Obwohl das arguments-Objekt technisch gesehen kein Array ist, verfügt es über eine length
-Eigenschaft, mit der die Anzahl der an eine Funktion übergebenen Argumente überprüft werden kann:
function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3
Durch die Verwendung der Eigenschaft length
haben wir eine bessere Kontrolle über die Anzahl der Argumente, die an eine Funktion übergeben werden. Wenn zum Beispiel eine Funktion zwei Argumente benötigt, um zu funktionieren, könnten wir die Eigenschaft length
verwenden, um die Anzahl der übergebenen Argumente zu überprüfen, und einen Fehler ausgeben, wenn sie weniger als erwartet sind:
function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }
Rest-Parameter sind Arrays, also haben sie eine length
. In ECMAScript 6 kann der vorangehende Code mit Restparametern umgeschrieben werden:
function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }
Die Eigenschaften des Aufgerufenen und des Anrufers
Die callee
Eigenschaft bezieht sich auf die Funktion, die derzeit ausgeführt wird, und der caller
bezieht sich auf die Funktion, die die derzeit ausgeführte Funktion aufgerufen hat. Im strengen Modus von ECMAScript 5 sind diese Eigenschaften veraltet, und der Versuch, auf sie zuzugreifen, verursacht einen TypeError.
Die Eigenschaft arguments.callee
ist in rekursiven Funktionen nützlich (eine rekursive Funktion ist eine reguläre Funktion, die sich mit ihrem Namen auf sich selbst bezieht), insbesondere wenn der Funktionsname nicht verfügbar ist (eine anonyme Funktion). Da eine anonyme Funktion keinen Namen hat, kann nur mit arguments.callee
darauf verwiesen werden.
var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24
Arguments-Objekt im strengen und nicht strengen Modus
Im nicht strikten Modus von ECMAScript 5 hat das arguments
-Objekt eine ungewöhnliche Funktion: Es hält seine Werte synchron mit den Werten der entsprechenden benannten Parameter.
Betrachten Sie das folgende Codefragment:
function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500
Innerhalb dieser Funktion wird arguments[0]
ein neuer Wert zugewiesen. Da die Werte von arguments
immer mit den Werten benannter Parameter synchron bleiben, ändert die Änderung an arguments[0]
auch den Wert von param
. Tatsächlich sind sie wie zwei verschiedene Namen für dieselbe Variable. Im strengen Modus von ECMAScript 5 wurde dieses verwirrende Verhalten des arguments
Objekts entfernt:
"use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200
Diesmal wirkt sich das Ändern von arguments[0]
nicht auf param
, und die Ausgabe ist wie erwartet. Die Ausgabe dieser Funktion in ECMAScript 6 ist dieselbe wie im strikten Modus von ECMAScript 5, aber denken Sie daran, dass das arguments
Objekt nicht betroffen ist, wenn Standardwerte in der function
verwendet werden:
function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');
Obwohl param3
einen Standardwert hat, ist er in dieser Funktion nicht gleich arguments[2]
, da nur zwei Argumente an die Funktion übergeben werden. Mit anderen Worten, das Festlegen von Standardwerten hat keine Auswirkung auf das arguments
Objekt.
Fazit
ECMAScript 6 hat Hunderte von kleinen und großen Verbesserungen für JavaScript gebracht. Immer mehr Entwickler verwenden ECMAScript 6-Funktionen, und bald werden diese Funktionen unvermeidlich sein. In diesem Tutorial haben wir gelernt, wie ECMAScript 6 die Parameterbehandlung in JavaScript verbessert hat, aber wir haben nur an der Oberfläche von ECMAScript 6 gekratzt. Viele andere neue und interessante Funktionen der Sprache sind einen Besuch wert.
Verknüpfungen
- ECMAScript 6-Kompatibilitätstabelle, Juriy Zaytsev
- „ECMAScript 2015 Sprachspezifikation“, ECMA International