diff --git a/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md index ba5d3bf04..28217f060 100644 --- a/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md +++ b/1-js/04-object-basics/04-object-methods/2-check-syntax/solution.md @@ -1,6 +1,6 @@ **Error**! -Try it: +Man versuche es einfach: ```js run let user = { @@ -11,19 +11,19 @@ let user = { (user.go)() // error! ``` -The error message in most browsers does not give us much of a clue about what went wrong. +Die Fehlermedlung in den meisten Browsern liefert einen nicht wirklich ein Verständnis dafür was schief lief. -**The error appears because a semicolon is missing after `user = {...}`.** +**Der Fehler erscheint, da ein Semikolon nach `user = {...}` fehlt.** -JavaScript does not auto-insert a semicolon before a bracket `(user.go)()`, so it reads the code like: +JavaScript fügt automatisch kein Semikolon vor einer Klammer ein, weshalb das Skript den Code wie folgt liest: ```js no-beautify let user = { go:... }(user.go)() ``` -Then we can also see that such a joint expression is syntactically a call of the object `{ go: ... }` as a function with the argument `(user.go)`. And that also happens on the same line with `let user`, so the `user` object has not yet even been defined, hence the error. +Wir können zudem sehen, das solch eine zusammenhängende Expression syntakitisch gesehen der Aufruf des Objekt `{ go: ... }` ist, als eine Funktion mit dem Argument `(user.go)`. Und genau das passiert in der selben Zeile mit `let user`, sodass das Objekt `user` nicht einmal definiert wurde. Darum der Fehler. -If we insert the semicolon, all is fine: +Wenn wir ein Semikolon einfügen läuft alles wie gewollt: ```js run let user = { @@ -34,4 +34,4 @@ let user = { (user.go)() // John ``` -Please note that parentheses around `(user.go)` do nothing here. Usually they setup the order of operations, but here the dot `.` works first anyway, so there's no effect. Only the semicolon thing matters. +Man beachte, dass die Parenthesen um `(user.go)` nichts bewirken. Normalerweise stellen sie die Reihenfolge der Operationen auf, aber hier agiert der Punkt `.` zuerst, weshalb sie keine Wirkung haben. Nur die Sache mit dem Semikolon zählt. diff --git a/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md b/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md index f40d68735..3a3023004 100644 --- a/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md +++ b/1-js/04-object-basics/04-object-methods/2-check-syntax/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Syntax check +# Syntaxprüfung -What is the result of this code? +Was ist das Resultat des folgenden Code? ```js no-beautify @@ -16,4 +16,4 @@ let user = { (user.go)() ``` -P.S. There's a pitfall :) +P.S. Es gibt eine Falle :) diff --git a/1-js/04-object-basics/04-object-methods/3-why-this/solution.md b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md index 31ea4ff88..d95316643 100644 --- a/1-js/04-object-basics/04-object-methods/3-why-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/3-why-this/solution.md @@ -1,22 +1,22 @@ -Here's the explanations. +Hier sind die Erklärungen. -1. That's a regular object method call. +1. Das ist ein regulärer Aufruf der dem Objekt zugehörigen Methode. -2. The same, parentheses do not change the order of operations here, the dot is first anyway. +2. Das selbe, da Parenthesen hier nicht die Reihenfolge der Operationen beeinflusst. Der Punkt steht trotzdem davor. -3. Here we have a more complex call `(expression).method()`. The call works as if it were split into two lines: +3. Hier haben wir den komplexeren Aufruf `(expression).method()`. Der Aufruf funktioniert so, als wäre er in zwei Zeilen unterteilt worden: ```js no-beautify f = obj.go; // calculate the expression f(); // call what we have ``` - Here `f()` is executed as a function, without `this`. + Hier wird `f()` als eine Funktion ohne `this` ausgeführt. -4. The similar thing as `(3)`, to the left of the dot `.` we have an expression. +5. Die ähnliche Sachw wie bei `(3)`. Zur linken des `.` steht eine Expression. -To explain the behavior of `(3)` and `(4)` we need to recall that property accessors (dot or square brackets) return a value of the Reference Type. +Um das Verhalten von `(3)` und `(4)` zu versthen müseen wir uns daran erinnern, dass die Zurgiffe auf Properties (Punkt oder eckige Klammern) einen Wert des Peferenztyp wiedergeben. -Any operation on it except a method call (like assignment `=` or `||`) turns it into an ordinary value, which does not carry the information allowing to set `this`. +Jegliche Operation die auf ihnen ausgeführt wird, mit Ausnahme eines Aufruf einer Methode (wie Zuweisungt `=` oder `||`), wandelt deren Wert in einen gewöhnlichen Wert um, der die nötige Inforamtion um ein `this` zu benutzen nicht aufnimmt. diff --git a/1-js/04-object-basics/04-object-methods/3-why-this/task.md b/1-js/04-object-basics/04-object-methods/3-why-this/task.md index e2c073f62..9d15bc8c1 100644 --- a/1-js/04-object-basics/04-object-methods/3-why-this/task.md +++ b/1-js/04-object-basics/04-object-methods/3-why-this/task.md @@ -2,11 +2,11 @@ importance: 3 --- -# Explain the value of "this" +# Man erkläre die Werte von "this" -In the code below we intend to call `obj.go()` method 4 times in a row. +Im unten stehenden Code wollen wir die Methode `obj.go()` vier mal hintereinander aufrufen. -But calls `(1)` and `(2)` works differently from `(3)` and `(4)`. Why? +Aber die Aufrufe `(1)` und `(2)`funktionieren ander als die von `(3)` und `(4)`. Warum? ```js run no-beautify let obj, method; @@ -23,4 +23,3 @@ obj.go(); // (1) [object Object] (obj.go || obj.stop)(); // (4) undefined ``` - diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md index c1aaf4f97..15c6de230 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/solution.md @@ -1,6 +1,6 @@ -**Answer: an error.** +**Die Antwort: Ein Fehler.** -Try it: +Man soll es einfach mal versuchen: ```js run function makeUser() { return { @@ -11,29 +11,29 @@ function makeUser() { let user = makeUser(); -alert( user.ref.name ); // Error: Cannot read property 'name' of undefined +alert( user.ref.name ); // Fehler: Cannot read property 'name' of undefined ``` -That's because rules that set `this` do not look at object definition. Only the moment of call matters. +Das liegt an den Regeln die `this` festlegen: Sie schauen nicht nach der Definition eines Objekt. Nur der Zeipunkt des Aufruf spielt eine Rolle. -Here the value of `this` inside `makeUser()` is `undefined`, because it is called as a function, not as a method with "dot" syntax. +Hier ist der Wert von `this` innerhlab von `makeUser()` `undefined`, da dieser als Funbktion aufgerufen wird und nicht als eine Methode mit dem "Punktsyntax". -The value of `this` is one for the whole function, code blocks and object literals do not affect it. +Der Wert von `this` ist einer für die ganze Funktion. Code Blocks und literale Objekte haben keinen Einfluss darauf. -So `ref: this` actually takes current `this` of the function. +Deshalb nimmt sich `ref: this` das aktuelle `this` der Funktion. -We can rewrite the function and return the same `this` with `undefined` value: +Wir koennen die Funktion umschreiben und das selbe `this` mit dem Wert `undefined` ausgeben: ```js run function makeUser(){ - return this; // this time there's no object literal + return this; // dieses Mal gibt es kein literales Objekt } -alert( makeUser().name ); // Error: Cannot read property 'name' of undefined +alert( makeUser().name ); // Fehler: Property 'name' von undefined kann nicht gelesen werden ``` -As you can see the result of `alert( makeUser().name )` is the same as the result of `alert( user.ref.name )` from the previous example. +Wie man sehen kann ist das Resultat von `alert( makeUser().name )` das selbe wie von `alert( user.ref.name )` im obigen Beispiel. -Here's the opposite case: +Hier der umgekehrte Fall: ```js run function makeUser() { @@ -52,4 +52,4 @@ let user = makeUser(); alert( user.ref().name ); // John ``` -Now it works, because `user.ref()` is a method. And the value of `this` is set to the object before dot `.`. +Jetzt funktioner es, da `user.ref()` eine Methode ist. Und der Wert von `this` wurde zu dem Objekt vor dem Punkt '.'. diff --git a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md index 4784b082c..af830aae2 100644 --- a/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md +++ b/1-js/04-object-basics/04-object-methods/4-object-property-this/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Using "this" in object literal +# Der Gebrauch von "this" bei literalen Objekten -Here the function `makeUser` returns an object. +Hier gibt die Funktion `makeUser` ein Objekt aus. -What is the result of accessing its `ref`? Why? +Was ist das Resultat wenn man auf dessen `ref` zugreift und weshalb? ```js function makeUser() { @@ -18,6 +18,6 @@ function makeUser() { let user = makeUser(); -alert( user.ref.name ); // What's the result? +alert( user.ref.name ); // Was ist das Resultat? ``` diff --git a/1-js/04-object-basics/04-object-methods/7-calculator/task.md b/1-js/04-object-basics/04-object-methods/7-calculator/task.md index aa22608ec..220821682 100644 --- a/1-js/04-object-basics/04-object-methods/7-calculator/task.md +++ b/1-js/04-object-basics/04-object-methods/7-calculator/task.md @@ -2,17 +2,17 @@ importance: 5 --- -# Create a calculator +# Einen Rechner erstellen -Create an object `calculator` with three methods: +Die Aufgabe ist es ein Objekt `calculator` mit drei Methoden zu erstellen: -- `read()` prompts for two values and saves them as object properties. -- `sum()` returns the sum of saved values. -- `mul()` multiplies saved values and returns the result. +- `read()` fordert einen auf zwei Werte anzugeben, die diese als Properties des Objekt abscpeichert. +- `sum()` gibt die Summer der zwei abgespeicherten Werte an. +- `mul()` multipliziert die abgespeicherten Werte miteinander und gibt das Resultat aus. ```js let calculator = { - // ... your code ... + // ... code ... }; calculator.read(); diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md index 2b47873fc..940a1f951 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/solution.md @@ -1,4 +1,4 @@ -The solution is to return the object itself from every call. +Die Lösung liegt darin, das Objekt selbst bei jedem Aufruf auszugeben. ```js run demo let ladder = { @@ -26,7 +26,7 @@ let ladder = { ladder.up().up().down().up().down().showStep(); // 1 ``` -We also can write a single call per line. For long chains it's more readable: +Wir können auch einen Aufruf per Zeile schreiben. Bei längeren Ketten ist das besser lesbar: ```js ladder diff --git a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md index eca9f4e92..1083ab300 100644 --- a/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md +++ b/1-js/04-object-basics/04-object-methods/8-chain-calls/task.md @@ -2,9 +2,9 @@ importance: 2 --- -# Chaining +# Verketten -There's a `ladder` object that allows to go up and down: +Es gibt ein Objekt `ladder`, dass es erlaubt auf un ab zu gehen: ```js let ladder = { @@ -15,13 +15,13 @@ let ladder = { down() { this.step--; }, - showStep: function() { // shows the current step + showStep: function() { // zeigt die derzeitige Stufe an alert( this.step ); } }; ``` -Now, if we need to make several calls in sequence, can do it like this: +Wenn wir nun mehrere Aufrufe hintereinander möchten, können wir das wie folgt tun: ```js ladder.up(); @@ -30,10 +30,10 @@ ladder.down(); ladder.showStep(); // 1 ``` -Modify the code of `up`, `down` and `showStep` to make the calls chainable, like this: +Man modifiziere den Code von `up`, `down` und `showStep` so, dass man die Aufrufe wie folgt verketten kann: ```js ladder.up().up().down().showStep(); // 1 ``` -Such approach is widely used across JavaScript libraries. +Solch eine Herangehensweise ist bei JavaScript Libraries weit verbreitet. diff --git a/1-js/04-object-basics/04-object-methods/article.md b/1-js/04-object-basics/04-object-methods/article.md index c9bc8d318..94b8e7858 100644 --- a/1-js/04-object-basics/04-object-methods/article.md +++ b/1-js/04-object-basics/04-object-methods/article.md @@ -1,6 +1,6 @@ -# Object methods, "this" +# Methoden des Objekt, "this" -Objects are usually created to represent entities of the real world, like users, orders and so on: +Objekte erstellt man für gewöhnlich um Entitäten der realen Welt zu schaffen, wie Nutzer oder Bestellungen usw.: ```js let user = { @@ -9,13 +9,13 @@ let user = { }; ``` -And, in the real world, a user can *act*: select something from the shopping cart, login, logout etc. +Und in der realen Welt kann ein Nutzer *agieren*: Etwas vom Einkaufswagen auswählen, sich ein- und ausloggen etc. -Actions are represented in JavaScript by functions in properties. +Aktionen werden in JavaScript durch Funktionen in den Properties repräsentiert. -## Method examples +## Beispiele für Methoden -For a start, let's teach the `user` to say hello: +Last uns zu Beginn den Nutzer lehren Hallo zu sagen: ```js run let user = { @@ -25,22 +25,22 @@ let user = { *!* user.sayHi = function() { - alert("Hello!"); + alert("Hallo!"); }; */!* -user.sayHi(); // Hello! +user.sayHi(); // Hallo! ``` -Here we've just used a Function Expression to create the function and assign it to the property `user.sayHi` of the object. +Hier haben wir schlicht eine Function Expression genutzt um die Funktion zu kreieren und diese der Property `user.sayHi` des Objekt hinzugefügt. -Then we can call it. The user can now speak! +Dann können wir sie aufrufen. Der Nutzer kann jetzt sprechen! -A function that is the property of an object is called its *method*. +Eine Funktion, welche die Property eines Objekt ist, nennt sich dessen *Methode*. -So, here we've got a method `sayHi` of the object `user`. +Wir haben hier also die Methode `sayHi` des Objekt `user`. -Of course, we could use a pre-declared function as a method, like this: +Wir könnten natürlich auch eine zuvor definierte Funktion als eine Methode nutzen: ```js run let user = { @@ -50,59 +50,59 @@ let user = { *!* // first, declare function sayHi() { - alert("Hello!"); + alert("Hallo!"); }; -// then add as a method +// diese als Methode hinzufügen user.sayHi = sayHi; */!* -user.sayHi(); // Hello! +user.sayHi(); // Hallo! ``` -```smart header="Object-oriented programming" -When we write our code using objects to represent entities, that's called [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming), in short: "OOP". +```smart header="Objektorientiertes Programmieren" +Wenn wir unseren Code so schreiben, dass Objekte Entitäten repräsentieren, nennt sich das [objektorientierte Programmierung](https://de.wikipedia.org/wiki/Objektorientierte_Programmierung), kurz: "OOP". -OOP is a big thing, an interesting science of its own. How to choose the right entities? How to organize the interaction between them? That's architecture, and there are great books on that topic, like "Design Patterns: Elements of Reusable Object-Oriented Software" by E. Gamma, R. Helm, R. Johnson, J. Vissides or "Object-Oriented Analysis and Design with Applications" by G. Booch, and more. +OOP ist eine große Sache, eine Wissenschaft für sich. Wie wählt man die passende Entitäten? Wie organisiert man die Interaktion zwischen ihnen? Das ist Architektur und es gibt großartige Bücher über das Thema, wie "Design Patterns: Elements of Reusable Object-Oriented Software" von E. Gamma, R. Helm, R. Johnson, J. Vissides oder "Object-Oriented Analysis and Design with Applications" von G. Booch und viele mehr. ``` -### Method shorthand +### Kurzschrift für Methoden -There exists a shorter syntax for methods in an object literal: +Es existiert ein kürzer Syntax für Methoden innerhalb literarischen Objekten: ```js -// these objects do the same +// die Objekte tun das selbe user = { sayHi: function() { - alert("Hello"); + alert("Hallo"); } }; -// method shorthand looks better, right? +// die Kurzschrift für Methoden sieht besser aus, nicht? user = { *!* sayHi() { // same as "sayHi: function()" */!* - alert("Hello"); + alert("Hallo"); } }; ``` -As demonstrated, we can omit `"function"` and just write `sayHi()`. +Wie demonstriert, können wir `"function"` weglassen und nur `sayHi()` schreiben. -To tell the truth, the notations are not fully identical. There are subtle differences related to object inheritance (to be covered later), but for now they do not matter. In almost all cases the shorter syntax is preferred. +Um bei der Wahrheit zu bleiben: Die Notationen sind nicht ganz identisch. Es gibt feine Unterschiede in Bezug auf die Objektvererbung (die später behandelt wird), die uns noch nicht interessiert. In den meisten fällen wird die Kurzschrift bevorzugt. -## "this" in methods +## "this" innerhalb von Methoden -It's common that an object method needs to access the information stored in the object to do its job. +Es ist üblich, dass die Methode eines Objekt auf Informationen, die innerhalb des Objekt abgespeichert sind, zugreifen muss um seine Arbeit zu tun. -For instance, the code inside `user.sayHi()` may need the name of the `user`. +So benötigt der Code innerhalb von `user.sayHi()` möglicherweise den Namen des `user`. -**To access the object, a method can use the `this` keyword.** +**Um auf das Objekt zuzugreifen, kann eine Methode das Schlüsselwort `this` nutzen.** -The value of `this` is the object "before dot", the one used to call the method. +Der Wert `this` ist das Objekt "vor dem Punkt", welches genutzt wurde um die Methode aufzurufen. -For instance: +Zum Beispiel: ```js run let user = { @@ -111,7 +111,7 @@ let user = { sayHi() { *!* - // "this" is the "current object" + // "this" ist das "derzeitige Objekt" alert(this.name); */!* } @@ -121,9 +121,9 @@ let user = { user.sayHi(); // John ``` -Here during the execution of `user.sayHi()`, the value of `this` will be `user`. +Hier ist der Wert von `this`, während der Ausführung von `user.sayHi()`, `user`. -Technically, it's also possible to access the object without `this`, by referencing it via the outer variable: +Technisch gesehen ist es auch möglich auf das Objekt ohne `this` zuzugreifen, indem man mit einer außenstehenden Variabel auf dieses verweist. ```js let user = { @@ -132,16 +132,15 @@ let user = { sayHi() { *!* - alert(user.name); // "user" instead of "this" + alert(user.name); // "user" anstelle von "this" */!* } }; ``` +... aber ein solcher Code ist unzuverlässig. Wenn wir uns dafür entscheiden `user` in eine andere Variabel zu kopieren, zum Beispiel `admin = user` und `user` mit etwas anderem überschreiben, dann wird auf das falsche Objekt zugegriffen. -...But such code is unreliable. If we decide to copy `user` to another variable, e.g. `admin = user` and overwrite `user` with something else, then it will access the wrong object. - -That's demonstrated below: +Das wird hier demonstriert: ```js run let user = { @@ -150,7 +149,7 @@ let user = { sayHi() { *!* - alert( user.name ); // leads to an error + alert( user.name ); // führt zu einem Fehler */!* } @@ -158,18 +157,18 @@ let user = { let admin = user; -user = null; // overwrite to make things obvious +user = null; // Überschreibung um die Sache offensichtlich zu machen -admin.sayHi(); // Whoops! inside sayHi(), the old name is used! error! +admin.sayHi(); // Whoops! innerhalb sayHi() wird der alte Name genutzt! Fehler! ``` +`alert` +Hätten wir `this.name` anstelle von `user.name` innerhalb des `alert` genutzt, dann würde der Code funktionieren. -If we used `this.name` instead of `user.name` inside the `alert`, then the code would work. - -## "this" is not bound +## "this" hat keine Bindung -In JavaScript, keyword `this` behaves unlike most other programming languages. It can be used in any function. +In JavaScript verhält sich das Schlüsselwort `this` wie in kaum einer anderen Programmiersprache. Es kann in jeder Funktion genutzt werden. -There's no syntax error in the following example: +Im folgenden Beispiel gibt es keinen Syntaxfehler: ```js function sayHi() { @@ -177,9 +176,9 @@ function sayHi() { } ``` -The value of `this` is evaluated during the run-time, depending on the context. +Der Wert von `this` wird während der Ausführung evaluiert und hängt vom Kontext ab. -For instance, here the same function is assigned to two different objects and has different "this" in the calls: +Hier wird die selbe Funktion zwei unterschiedlichen Objekten zugeschrieben und "this" hat verschiedene Resultate beim Abruf: ```js run let user = { name: "John" }; @@ -190,23 +189,23 @@ function sayHi() { } *!* -// use the same function in two objects +// man nutzt die selbe Funktion für zwei Objekte user.f = sayHi; admin.f = sayHi; */!* -// these calls have different this -// "this" inside the function is the object "before the dot" +// diese Aufrufe haben ein unterschiedliches this +// "this" innerhalb der Funktion ist das Objekt "vor dem Punkt" user.f(); // John (this == user) admin.f(); // Admin (this == admin) -admin['f'](); // Admin (dot or square brackets access the method – doesn't matter) +admin['f'](); // Admin (Punkt oder eckige Klammern greifen auf die Methode zu - da gibt es keinen Unterschied) ``` -The rule is simple: if `obj.f()` is called, then `this` is `obj` during the call of `f`. So it's either `user` or `admin` in the example above. +Die Regeln sind simpel: Wenn `obj.f()` aufgerufen wird, dann ist `this` während des Aufruf von `f` `obj`. Deshalb ergibt es entweder `user` oder `admin` im obigen Beispiel. -````smart header="Calling without an object: `this == undefined`" -We can even call the function without an object at all: +````smart header="Aufruf ohne ein Objekt: `this == undefined`" +Wir können die Funktion gar ohne ein Objekt aufrufen: ```js run function sayHi() { @@ -216,32 +215,32 @@ function sayHi() { sayHi(); // undefined ``` -In this case `this` is `undefined` in strict mode. If we try to access `this.name`, there will be an error. +In diesem Fall ist `this`, im strikten Modus, `undefined`. Wenn wir versuchen auf `this.name` zuzugreifen, dann wird es einen Fehler geben. -In non-strict mode the value of `this` in such case will be the *global object* (`window` in a browser, we'll get to it later in the chapter [](info:global-object)). This is a historical behavior that `"use strict"` fixes. +Im nicht striktren Modus entspricht der Wert von `this` in einem solchen Fall dem *Globalen Objekt* (`window` in einem Browser, wir werden noch später im Kapitel [](info:global-object) dazu kommen). Das ist ein historisch bedingtes Verhalten, das `"use strict"` behebt. -Usually such call is a programming error. If there's `this` inside a function, it expects to be called in an object context. +Normalerweise wäre ein solcher Aufruf ein Programmierfehler. Wenn ein `this` innerhalb einer Funktion steht, wird davon ausgegangen das dies im Kontext eines Objekt geschieht. ```` -```smart header="The consequences of unbound `this`" -If you come from another programming language, then you are probably used to the idea of a "bound `this`", where methods defined in an object always have `this` referencing that object. +```smart header="Die Konsequenzen eines ungebunden `this`" +Wenn man von einer anderen Programmiersprache herkommt, ist man wahrscheinlich an die Idee eines "gebunden `this`" gewohnt, wo Methoden, die innerhalb eines Objekt definiert wurden, `this` immer auf dieses Objekt verweist. -In JavaScript `this` is "free", its value is evaluated at call-time and does not depend on where the method was declared, but rather on what object is "before the dot". +In JavaScript ist `this` "frei": Dessen Wert wird bim Abruf evaluiert und ist nicht davon abhängig an welcher Stelle die Methode deklariert wurde, aber eher davon welches Objekt "vor dem Punkt" steht. -The concept of run-time evaluated `this` has both pluses and minuses. On the one hand, a function can be reused for different objects. On the other hand, the greater flexibility creates more possibilities for mistakes. +Das Konzept eines während der Ausführung evaluierten `this` hat Vor- wie Nachteile. Auf der einen Seite kann eine Funktion für verschiedene Objekte mehrmals wiederverwendet werden. Auf der anderen schafft die große Flexibilität mehr Möglichkeiten für Fehler. -Here our position is not to judge whether this language design decision is good or bad. We'll understand how to work with it, how to get benefits and avoid problems. +Wir wollen hier aber nicht darüber urteilen ob dieses Design der Sprache gut oder schlecht ist. Wir wollen verstehen mit diesem umzugehen und damit zu arbeiten, wie man davon profitiert und Probleme vermeidet. ``` -## Internals: Reference Type +## Internes: Referenztyp -```warn header="In-depth language feature" -This section covers an advanced topic, to understand certain edge-cases better. +```warn header="In die tiefe gehendes Sprachmerkmal" +Dieser Abschnitt behandelt ein erweiterndes Thema, um gewisse Grenzfälle besser zu verstehen. -If you want to go on faster, it can be skipped or postponed. +Wenn man schneller fortschreiten möchte kann dieser Abschnitt übersprungen oder aufgeschoben werden. ``` -An intricate method call can lose `this`, for instance: +Ein komplizierter Methodenaufruf kann `this` verlieren. Hier zum Beispiel: ```js run let user = { @@ -250,40 +249,40 @@ let user = { bye() { alert("Bye"); } }; -user.hi(); // John (the simple call works) +user.hi(); // John (der einfache Aufruf klappt) *!* -// now let's call user.hi or user.bye depending on the name -(user.name == "John" ? user.hi : user.bye)(); // Error! +// man ruft nun user.hi oder user.bye abhängig vom Namen auf +(user.name == "John" ? user.hi : user.bye)(); // Fehler! */!* ``` -On the last line there is a conditional operator that chooses either `user.hi` or `user.bye`. In this case the result is `user.hi`. +In der letzten Zeile gibt es einen konditionellen Operator, der entweder `user.hi` oder `user.bye` auswählt. In diesem Fall ist das Resultat `user.hi`. -Then the method is immediately called with parentheses `()`. But it doesn't work correctly! +Dann wird die Methode umgehend mit Parenthesen `()` aufgerufen. Aber es funktioniert nicht richtig! -As you can see, the call results in an error, because the value of `"this"` inside the call becomes `undefined`. +Wie man sehen kann endet der Aufruf in einem Fehler, da der Wert von `"this"` innerhalb des Aufruf zu `undefined` wird. -This works (object dot method): +Das hier funktioniert (Objekt-Punkt-Methode): ```js user.hi(); ``` -This doesn't (evaluated method): +Das hier nicht (evaluierte Methode): ```js -(user.name == "John" ? user.hi : user.bye)(); // Error! +(user.name == "John" ? user.hi : user.bye)(); // Fehler! ``` -Why? If we want to understand why it happens, let's get under the hood of how `obj.method()` call works. +Weshalb? Wenn wir verstehen wollen weshalb das passiert, dann sollten wir genauer verstehen wie der Aufruf `obj.method()` im inneren funktioniert. -Looking closely, we may notice two operations in `obj.method()` statement: +Wenn man genauer hinschaut bemerkt man zwei Operationen innerhalb des Statement von `obj.method()`: -1. First, the dot `'.'` retrieves the property `obj.method`. -2. Then parentheses `()` execute it. +1. Als erstes findet der Punkt `'.'` die Property `obj.method`. +2. Dann führen die Parenthesen `()` diese aus. -So, how does the information about `this` get passed from the first part to the second one? +Wie wird also die Information über `this` vom ersten Part zum zweiten rüber gebracht? -If we put these operations on separate lines, then `this` will be lost for sure: +Wenn wir diese Operationen auf unterschiedliche Zeilen stellen wird `this` mit Sicherheit verloren gehen: ```js run let user = { @@ -292,44 +291,44 @@ let user = { } *!* -// split getting and calling the method in two lines +// man teile das Erhalten und den Aufruf der Methode in zwei Zeilen auf let hi = user.hi; -hi(); // Error, because this is undefined +hi(); // Error, da this undefiniert ist */!* ``` -Here `hi = user.hi` puts the function into the variable, and then on the last line it is completely standalone, and so there's no `this`. +Hier steckt `hi = user.hi` die Funktion in die Variabel und in der letzten Zeile steht die Funktion ganz alleine da und so gibt es dann kein `this`. -**To make `user.hi()` calls work, JavaScript uses a trick -- the dot `'.'` returns not a function, but a value of the special [Reference Type](https://tc39.github.io/ecma262/#sec-reference-specification-type).** +**Das Aufrufe wie `user.hi()` funktionieren, nutzt JavaScript einen Trick -- der Punkt `'.'` gibt nicht eine Funktion aus, aber einen Wert des speziellen [Referenztyp](https://tc39.github.io/ecma262/#sec-reference-specification-type).** -The Reference Type is a "specification type". We can't explicitly use it, but it is used internally by the language. +Der Referenztyp ist ein "Spezifikationstyp". Wir können ihn explizit nutzen, wird aber hauptsächlich inter von der Sprache genutzt. -The value of Reference Type is a three-value combination `(base, name, strict)`, where: +Der Wert des Referenztyp ist die Kombination aus drei Werten `(base, name, strict)`, wobei: -- `base` is the object. -- `name` is the property name. -- `strict` is true if `use strict` is in effect. +- `base` das Objekt ist. +- `name` der Property-Name ist. +- `strict` wahr ist wenn `use strict` genutzt wird. -The result of a property access `user.hi` is not a function, but a value of Reference Type. For `user.hi` in strict mode it is: +Das Resultat eines Zugriff auf eine Property `user.hi` ist keine Funktion, jedoch ein Wert des Referenztyp. Im strikten Modus ist dieser für `user.hi`: ```js // Reference Type value (user, "hi", true) ``` -When parentheses `()` are called on the Reference Type, they receive the full information about the object and its method, and can set the right `this` (`=user` in this case). +Wenn Parenthesen `()` bei einem Referenztyp aufgerufen werden, dann erhalten diese vollständige Informationen über das Objekt und dessen Methoden und können nach dem richtigen `this` (`=user` in diesem Fall) schauen. -Reference type is a special "intermediary" internal type, with the purpose to pass information from dot `.` to calling parentheses `()`. +Ein Referenztyp ist ein spezieller interner "vermittlerischer" Typ, mit dem Zweck Informationen vom `.` zu den aufgerufenen Parenthesen `()` rüber zu spielen. -Any other operation like assignment `hi = user.hi` discards the reference type as a whole, takes the value of `user.hi` (a function) and passes it on. So any further operation "loses" `this`. +Jegliche andere Operationen wie Zuweisungen `hi = user.hi` verwerfen den Referenztyp. Der Wert von `user.hi` (eine Funktion) wird aufgenommen und wird weitergegeben. Deshalb "verliert" jede weiter Operation `this`. -So, as the result, the value of `this` is only passed the right way if the function is called directly using a dot `obj.method()` or square brackets `obj['method']()` syntax (they do the same here). Later in this tutorial, we will learn various ways to solve this problem such as [func.bind()](/bind#solution-2-bind). +Das Resultat ist, dass der Wert von `this` nur auf richtige Weise weitergegeben wird, wenn die Funktion direkt mit dem Punkt `obj.method()` oder mit den eckigen Klammern `obj['method']()` aufgerufen wird (beide tun das selbe). Später noch werden wird zahlreiche Wege kennenlernen mit denen wir dieses Problem lösen, wie bspw. mit [func.bind()](/bind#solution-2-bind). -## Arrow functions have no "this" +## Pfeilfunktionen verügen über kein "this" -Arrow functions are special: they don't have their "own" `this`. If we reference `this` from such a function, it's taken from the outer "normal" function. +Pfeilfunktionen sind speziell: Sie verfügen über kein "eigenes" `this`. Wenn wir auf `this` innerhalb einer solchen Funktion verweisen, wird der Wert von `this` von der äußeren "normalen" Funktion aufgegriffen. -For instance, here `arrow()` uses `this` from the outer `user.sayHi()` method: +Hier nutzt `arrow()` zum Beispiel `this` von der äußeren Methode `user.sayHi()`: ```js run let user = { @@ -343,18 +342,18 @@ let user = { user.sayHi(); // Ilya ``` -That's a special feature of arrow functions, it's useful when we actually do not want to have a separate `this`, but rather to take it from the outer context. Later in the chapter we'll go more deeply into arrow functions. +Das ist eine spezielle Funktion der Pfeilfunktion, die nutzvoll ist wenn wir eigentlich kein separates `this` haben wollen, aber es eher vom äußeren Kontext aufnehmen wollen. Im Kapitel werden wir unser Wissen über Pfeilfunktionen vertiefen. -## Summary +## Zusammenfassung -- Functions that are stored in object properties are called "methods". -- Methods allow objects to "act" like `object.doSomething()`. -- Methods can reference the object as `this`. +- Funktionen die innerhalb von Properties eines Objekt gespeichert sind, nennen sich "Methoden". +- Methoden erlauben es Objekten zu "agieren", wie `object.doSomething()`. +- Methoden können auf das Objekt mit `this` verweisen. -The value of `this` is defined at run-time. -- When a function is declared, it may use `this`, but that `this` has no value until the function is called. -- A function can be copied between objects. -- When a function is called in the "method" syntax: `object.method()`, the value of `this` during the call is `object`. +Der Wert von `this` wird während der Ausführung evaluiert. +- Wenn eine Funktion deklariert wurde, nutzt sie möglicherweise `this`, wobei dieses `this` keinen Wert hat solange die Funktion nicht aufgerufen wird. +- Eine Funktion kann zwischen Objekten transferiert werden. +- Wenn eine Funktion mit dem "Methodensyntax" aufgerufen wird: `object.method()`, der Wert von `this` während des Aufruf ist `object`. -Please note that arrow functions are special: they have no `this`. When `this` is accessed inside an arrow function, it is taken from outside. +Man beachte, dass Pfeilfunktionen speziell sind: Sie verfügen über kein `this`. Wenn auf `this` innerhalb einer Pfeilfunktion zugegriffen wird, dann wird dessen Wert von außerhalb aufgegriffen.