Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

OOP mit JavaScript Grundkurs

Besondere Arten des Funktionsaufrufs mit bind(), apply() und call()

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Funktionsobjekte stellen verschiedene Methoden zur Verfügung, mit denen man insbesondere Verkettungen und Datenbindungen erzielt.
07:46

Transkript

Es gibt verschiedene Varianten, wie Sie Funktionen und Methoden bei JavaScript aufrufen können. In diesem Video möchte ich Ihnen zeigen, wie das geht und was für Effekte es hat, wenn Sie die Methoden call, apply und bind verwenden. Jedes Objekt stellt die Methode call und apply zur Verfügung. Sie sehen, dass ich hier einen Konstruktor gebaut habe, bei dem ich mit "this.name" und "this.preis" die jeweiligen Eigenschaften registriere. Parameter werden hier übergeben. Ich habe hier auch einen weiteren Konstruktor "Nahrungsmittel". Der nimmt über "Produkt.call" eine Verkettung von Konstruktoren vor. Der erste Parameter "this" ist das aktuelle Objekt, das anonyme globale Objekt. Die folgenden Parameter "name" und "preis" werden vom Aufruf der Funktion weitergereicht. Dazu wird eine weitere Eigenschaft ergänzt, hier "kategorie". Wir erreichen also über die Verkettung der Konstruktoren in diesem Fall eine Art Vererbung. Auch beim "Werkzeug" findet hier noch einmal das Gleiche statt. Apply ist nun sowohl von der Syntax als auch der Anwendung call sehr ähnlich. Der Unterschied ist die Parameterliste. Ab dem zweiten Parameter haben wir jetzt ein Array und nicht, wie bei call, eine Auflistung einzelner Parameter. In meinem konkreten Beispiel habe ich die übergebenen Parameter hier zu einem lokalen Array zusammengefasst und dann apply übergeben. Ansonsten ist die Anwendung vollkommen identisch. Ich erreiche hier also eine Verkettung von Konstruktoren und das schauen wir uns etwas genauer an. Ich habe hier jetzt mehrere Objekte erzeugt, und zwar ein Objekt vom Typ "Nahrungsmittel", ein Objekt vom Typ "Werkzeug" und ein Objekt vom Typ "KFZ". Ich gebe dann die Struktur dieses Objekts mittels dieser Funktion aus. Und hier sehen Sie die Ausgabe. Das dritte Objekt und Sie sehen durch das erste Objekt, das zweite Objekt und das dritte Objekt. Sie erkennen, dass auch die Eigenschaften auftauchen, die quasi vererbt wurden. Nun kann man call und apply auch auf andere Arten anwenden. Ganz spannend ist zum Beispiel das hier. Auch hier habe ich jetzt ein Array, genauer genommen ein Array mit Arrays als Inhalt. Ich iteriere über dieses Array und im Inneren habe ich eine anonyme Funktion. Diese deklariert selbst eine Methodenausgabe, die wiederum ebenfalls mit einer anonymen Funktion arbeitet. Im Inneren greife ich auf die jeweiligen Attribute zu, also "art" und "name" Das ist dann der Aufruf dieser Methode. Das Spannende ist, dass ich mit call hier über dieses Array die erste Dimension des Arrays iteriere. Das hier ist der Kontext. Der Kontext ist in diesem Fall also nicht "this", sondern das jeweilige Objekt, also hier in diesem Fall das erste und das zweite. Der zweite Parameter ist der Wert der Zählvariablen der Schleife. Sie sehen also, dass wir sowohl vom Kontext her eben nicht immer mit "this" arbeiten müssen, sondern auch einen anderen Kontext übergeben können und dass man eben auch nicht nur Konstruktoren verketten kann, sondern auch durchaus anonyme Funktionen, eine weitere sehr wichtige Anwendung von call. Nun bleibt noch eine dritte Methode zu behandeln und die heißt bind. Damit kann man sogenanntes Data Binding erreichen. Denken Sie einmal an Excel. Wenn Sie in Excel eine Zelle haben, die sich auf eine andere Zelle bezieht und sich in der Zelle, auf die ein Bezug besteht, ein Wert ändert, dann wird sich der Wert in der gebundenen Zelle auch verändern. Und so etwas habe ich hier mit der bind-Methode realisiert. Ich habe hier ein weiteres Objekt deklariert. Es gibt hier eine Eigenschaft "x", eine getter-Funktion für einen Lesezugriff und eine setter-Funktion für einen Schreibzugriff. Genau genommen handelt es sich um getter- und setter-Methoden. Zuerst gebe ich den Wert von "x" mittels der getter-Methode aus. Das ist natürlich der Anfangswert "82". Dann nehme ich die Referenz auf die getter-Methode, und binde mittels der bind-Methode das Objekt an eine neue Variable. Das heißt, "gebundenesGetX" ist damit ein Funktionszeiger und den kann man aufrufen, indem man Klammern daranmacht. Das ist ja damit dann ein Funktionsaufruf und wir haben hier einen Funktionszeiger auf diesen getter. Nun benutze ich den setter des Objekts, um den Wert der Eigenschaft "x" zu ändern. An der Ausgabe werden Sie sehen, dass die gebundene Funktion diese Änderung mitbekommt. Das sind die letzten drei Ausgaben. Originalwert, Zugriff über die gebundene Funktion, Wert über die gebundene Funktion nach der Änderung. Die Ausgabe darüber ist die Iteration über dieses multidimensionale Array. Das heißt, "gebundenesGetX" ist damit ein Funktionszeiger, ein Funktionszeiger auf diesen getter. Sie sehen, wenn ich diesen Funktionszeiger in Klammern notiere, das ist ja ein Funktionsaufruf, werden Sie den Wert "82" bekommen. Dann benutze ich den setter, um den Wert der Eigenschaft "x" hier zu ändern. Und Sie sehen, dass die gebundene Funktion diese Änderung auch mitbekommt. Das sind die letzten drei Ausgaben: Originalwert, Zugriff über die gebundene Funktion nach der Änderung, die Ausgaben darüber ist die Iteration über dieses multidimensionale Array. Diese Methoden, call, apply, bind, zählen unmittelbar zu jedem function-Objekt, gehören aber definitiv zu den etwas komplexeren Anwendungen von JavaScript und werden in der Praxis auch nur mit Vorsicht eingesetzt, weil es auch hier gerade bei älteren Engines Probleme gibt und zudem Funktionsobjekte als nicht sonderlich performant gelten. Es gehört zu den klassischen Optimierungstipps auf Funktionsobjekte zu verzichten.

OOP mit JavaScript Grundkurs

Sehen Sie, wie Sie mit JavaScript objektorientiert programmieren können.

3 Std. 8 min (35 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!