Objektorientierte Programmierung (OOP) in JavaScript: Eine Einführung in 110 Minuten // deutsch
Ғылым және технология
Objektorientierte Programmierung in JavaScript, das ist nicht ganz so einfach, wie sich das viele Entwicklerinnen und Entwickler wünschen. Zu anders als die klassischen objektorientierten Sprachen wie C++, Java und C# ist JavaScript an vielen Stellen. Doch wer weiß, wie Objekte in JavaScript funktionieren, kann dennoch sehr eleganten Code schreiben. Golo Roden, Gründer und CTO der the native web GmbH, erklärt, worauf es bei der objektorientierten Programmierung in JavaScript zu achten gilt.
0:00:00 - Einleitung
0:00:54 - Was ist ein Objekt?
0:03:09 - Key-Value-Paare
0:05:43 - Objekte mit Funktionen erzeugen
0:07:28 - Listen mit verschachtelten Objekten
0:11:50 - Objekte lesbar ausgeben
0:13:40 - Objekte strukturiert erzeugen
0:14:55 - Der typeof-Operator
0:17:44 - Arrays als spezielle Objekte
0:22:54 - Datentypen für Keys
0:27:48 - Umgang mit privaten Daten
0:33:09 - Zwischenfazit #1
0:34:04 - Funktionen sind Objekte
0:36:44 - Fibonacci-Zahlen berechnen
0:41:05 - Die Rekursion beschleunigen
0:44:50 - Eigenschaften für Funktionen definieren
0:47:48 - Zwischenfazit #2
0:50:11 - Zur Effizienz von Objekten
0:52:41 - Konstruktorfunktionen verwenden
0:56:51 - Der new-Operator
1:00:51 - Konventionen für Konstruktoren
1:02:37 - Konventionen (bewusst) ignorieren
1:05:52 - Das Prototyp-Objekt
1:13:59 - Daten im Prototyp speichern
1:17:05 - Statische Funktionen
1:18:11 - Zwischenfazit #3
1:21:38 - Vererbung mit Prototypen
1:22:43 - Das class-Schlüsselwort
1:26:32 - Klassen: Der Wolf im Schafspelz
1:30:03 - Vererbung mit Klassen
1:31:37 - Private Daten in EcmaScript 2022
1:34:21 - Das this-Schlüsselwort
1:49:01 - Klassen vs der funktionale Ansatz
────────────────────
Über the native web 🦄
Wir sind ein Beratungs-, Schulungs- und Entwicklungsunternehmen, das sich auf Web- und Cloud-Technologien spezialisiert hat. Wir streben nach intelligenten und eleganten Lösungen für komplexe Probleme, und wir glauben, dass Softwareentwicklung kein Selbstzweck ist. Stattdessen sollte Software tatsächliche Probleme der realen Welt lösen.
Wir glauben, dass native Web- und Cloud-Technologien das Fundament sind, auf dem die Zukunft aufbaut. Unsere Kernkompetenz ist der Entwurf und die Entwicklung verteilter Web- und Cloud-Anwendungen unter Verwendung dieser Technologien in interdisziplinären Teams. Wir entwickeln auch unser eigenes Open-Source-Framework namens wolkenkit. Und wir lieben es, unser Wissen in Schulungen und Workshops, auf Konferenzen und bei Usergroups zu teilen.
⬥ Kanal abonnieren: / @thenativeweb
────────────────────
Weiterführende Links 🌍
⬥ Webseite: www.thenativeweb.io/
⬥ Twitter: / thenativeweb , / goloroden
⬥ Discord: / discord
⬥ GitHub: github.com/thenativeweb
⬥ wolkenkit: www.thenativeweb.io/wolkenkit...
⬥ Impressum: www.thenativeweb.io/company/l...
Пікірлер: 59
Danke! Habe viel Neues gelernt! Unglaublich tolles Video!
@thenativeweb
Жыл бұрын
[gr] Vielen, vielen Dank - das freut uns sehr 🥰
Ich kann mittlerweile einfach nur danke sagen! Jedes Mal aufs Neue so viel Inhalt in einem Video. Leider hab ich diesen Kanal erst sehr spät entdeckt, aber lieber später als nie.
@thenativeweb
2 жыл бұрын
[gr] Vielen lieben Dank 😊
Ich kann mich den meisten Kommentaren nur anschließen. Ihr seid der Hammer!!! Danke für die regelmäßig großartigen Videos! Ihr gehört mittlerweile zu meinem täglichen Pflichtprogramm.
@thenativeweb
2 жыл бұрын
[gr] Vielen, vielen Dank 😊
Ich liebe diese Reihe ❤️ TDD Docker Kubernetes …
@thenativeweb
2 жыл бұрын
[gr] Das freut mich, vielen Dank 😊
Ich freue mich schon auf einen so qualitativ hochwertigen Content rund um Go!
@thenativeweb
2 жыл бұрын
[gr] Danke schön 😊
Super Video zu JavaScript und OOP. Vor allen die Fallstricke zum Thema this sind super erklärt.Vielen Dank.
@thenativeweb
2 жыл бұрын
[gr] Das freut mich, vielen Dank 😊
Erst jetzt wird mir einiges dank deiner Hilfe klar. Tolles Video zum Thema js OOP. Herlichen Dank!
Das war die beste Javascript Zusammenfassung, die ich bis jetzt gesehen habe. Wird weiterempfohlen. Vielen Dank dafür. Was ich für mich mitgenommen habe: Bei „new“, das versteckte mitgeben von „{}“ als „this“ und das anhängen von Variablen und Funktionen daran, den Unterschied von „call“ „commas“ und „apply“ „array“ und die unterschiedlichen Varianten von „this“.
1:32:04 Um Variablen in VSCode umzubenennen, kann man einfach F2 drücken.
Wieder ein tolles Video! Danke! 😊 Mir wird damit einiges klarer! 😊 Ich mag den funktionalen Ansatz insgesamt auch besser und finde mich gerne damit ab, dass es eben keine C-Sprache ist. Das mag ich sogar irgendwie daran.
Vielen Dank für Dein sehr spannendes und informatives Video. 😊 In diesem Video konnte ich doch einiges auffrischen und dazu lernen. Jetzt finde ich auch das JaveScript "this" etwas weniger gruselig. 😁
Vielen lieben Dank für dieses informative Video!
@thenativeweb
2 жыл бұрын
[gr] Vielen lieben Dank 😊
Tolle Informationen. Das ist ja schon ein Kompendium. Auch die Randinfos wie cdr cda und NullType Bug in JavaScript sowie Prototype sind interessant. Das erste mal, dass ich den „Thanks$“ Button gedrückt habe. Vielen vielen Dank.
@thenativeweb
2 жыл бұрын
[gr] Vielen Dank für Dein tolles Feedback, und natürlich auch für Deine Unterstützung 😊
Vielen Dank für das Video, gerade bei den Eigenheiten von `this` war ich mir doch nicht so sicher. Mit dem OOP Ansatz und den Prototypen von JavaScript und Lua komme ich aber tatsächlich besser klar als mit dem "klassischen" Ansatz von C++,C#,Java. Generell liegen mir die Ansätze abseits des klassischen OOP mehr, gute Beispiele dafür sind auch C und Go. Es lohnt sich auf jeden Fall OOP in diesen beiden Sprachen anzusehen.
Ich liebe diesen Channel
@thenativeweb
2 жыл бұрын
[gr] Vielen, vielen Dank 😊
Ich habe erst vor kurzem angefangen, mich mit dem Thema Webentwicklung zu beschäftigen und bin dadurch zufällig auf deinen Kanal gestoßen. Ich wollte mich einfach mal bei dir bedanken für den ganzen Content, den du uns zur Verfügung stellst. Vor allem macht es mega Spaß dir dabei zuzuhören und ich habe in so kurzer Zeit so viel von dir gelernt! Einfach mega, Danke!!
@thenativeweb
2 жыл бұрын
[gr] Vielen, vielen Dank 😊
Meine Mutter sagte immer, man solle nicht fluchen... Ich mache es hier trotzdem: VERDAMMT gute Vermittlungskompetenz bei gutem Unterhaltungscharakter!
@thenativeweb
2 жыл бұрын
[gr] Vielen, vielen Dank 😊
Neu war für mich, dass man mit dem new Operator ein beliebiges Objekt zurück geben kann.👍
Bin langjähriger javascript Entwickler und muss zugeben, ich erfahre in jedem Deiner Videos einiges Neues. Gerade die OO Thematik war immer so eine unklare Geschichte. Wie ist es denn nun richtig? Warum per keyword class, warum nicht? ... und so wuchs der Code historisch mehr oder weniger gut. Hintergrundinformationen und teilweise nur beiläufig erwähnte Sachverhalte bringen mich in Deinen Videos oft auf neue Spuren. Dann schaut man eben doch mal in die node.js, typescript usw. Ecke, auch wenn das gerade nicht aktuelles Entwicklungsthema ist. Fragezeichen die beim Schauen der Videos entstehen, werden dann auch kurz darauf geklärt. Dieser Punkt ist bei anderen Kanälen teilweise unbefriedigend.
Ich würde wirklich gern mal ein ausführliches Video zum Konzept und zur praktischen Anwendung von OLOO (Objects linked to other objects) als Alternative zur Vererbung sehen.
Danke!
@thenativeweb
2 жыл бұрын
[gr] Vielen herzlichen Dank 😊
Richtige geile Videos und Erklärungen :D danke vielmals. Wie hast du bei 1:40:30 die ganzen private hashtags # markiert und gelöscht?
Kann mich ebenfalls nur anschließen. Mega Video! Aber am Ende kann ich nur sagen: "JavaScript, the sky is the limit"! Das ist doch ekelhaft, irgendwo hörts auf. ^^
@thenativeweb
2 жыл бұрын
[gr] Danke für Dein Feedback 😊
Sehr sehr gut erklärt. Jetzt ist es wieder etwas einfacher Mitarbeiter zu finden, die JS können. :P Wenn du jetzt nicht nur ein Deepdive machen möchtest, sondern vielleicht mal bis zum Challenger Deep tauchen möchtest, dann solltest du noch den Unterschied zwischen Object.getPrototypeof(MyObject), MyObject.prototype und MyObject.__proto__ erklären. Dann haste JS in Gänze erklärt. =) Damit habe ich mich nämlich in meinem Projekt rumschlagen müssen und ich sag dir... Wenn du das, was du im Video schon erklärt hast schräg findest, dann beschäftige dich mal damit... Das "Schiefe Haus" im Phantasialand - Gott habe es selig - ist dagegen schon fast wieder lotrecht. Schade fand ich nur, dass zumindest bei mir Bild und Ton etwas versetzt waren. Ansonsten selbstverständlich mal wieder ein sehr gelungenes Video.
@DJTechnostyler
2 жыл бұрын
@@sirfakealot5041 Keine Ahnung, wo meine Antwort hin ist, aber das braucht man um Vererbungsketten on-the-fly zu manipulieren.
@DJTechnostyler
2 жыл бұрын
@@sirfakealot5041 In meinem Fall brauche ich das, weil ich mit einem Decorator meine models initialisiere. Dieser Decorator gibt eine neue Klasse zurück, die von der dekorierten Klasse ableitet. Wenn ich jetzt wiederum von der dekorierten Klasse ableite, leite ich in Wirklichkeit von der vom Decorator zurückgegebenen Klasse ab. Diese will ich dann aber nicht mehr haben, weil sonst einige Dinge X mal ausgeführt werden. Also wandere ich die Vererbungskette so lange hoch, bis ich eine Klasse habe, deren Prototyp diese im Dekorator definierte Klasse ist und setze dann den Prototyp auf den prototyp der Decorator-Klasse, sodass die Decorator-Klasse wieder nur ein mal in der Kette vorhanden ist. Den Decorator brauche ich, weil ich da etwas drinne mache, was man sonst nach jeder Initialisierung händisch machen müsste, oder man muss die Models immer über eine Factory erzeugen. Das ist allerdings extrem ungewohnt, weshalb ich die "Factory" damit in das Model selbst integriere. Würde dir gerne zeigen, wie genau, aber sobald ich versuche hier ansatzweise was rein zu schreiben, dass wie ein Link aussieht, entfernt YT das.
Golos Erwartung bei 1:39:20 wurde in node 18 verändert und verhält sich jetzt ECMA Script modules konform: Das globalThis wird nicht mehr automatisch als Kontext gesetzt.
@Sourcer3r
2 жыл бұрын
Somit ist "use strict"; in der ersten Zeile wieder ein noop.
@thenativeweb
2 жыл бұрын
[gr] Ah okay, das ist mir in den Release-Notes entgangen, danke für die Aufklärung 😊
@thenativeweb
2 жыл бұрын
[gr] Nicht ganz - "use strict" macht ja schon noch mehr als nur das Verhalten von this zu beeinflussen … sinnvoll ist es in jedem Fall.
setTimeout() und setInterval() kann man auch Parameter übergeben: setTimeout(function(bla) { console.log(bla.car()); , 1_000, this);
Sehr gut erklärt, tolles Video! Zu den Ergänzungen "this": Würde der Aufruf mit bind auch nicht funktionieren? setTimeout(function (){ log (this.car()); }, 1_000).bind(this);
@thenativeweb
2 жыл бұрын
[gr] Was kommt denn dabei heraus, wenn Du es ausprobierst 😉?
@fleckenfurz77
Жыл бұрын
Hi Mehmet, Du hast vollkommen Recht! Also damit, dass es mit bind auch geht.. ..nicht damit, dass der Kanalbetreiber gut erklärte Videos produziert. (viele Füllwörter, Phrasen, für Anfänger völlig unbrauchbare, verwirrende Bsp, usw) Ein einfaches Bsp wie: class A { constructor(name){ this.name = name } sayName(){ setTimeout(function(){ console.log('My name is:', this.name) }.bind(this), 1000) } } ..hätte vollkommen ausgereicht. Das Ganze kann man auf 10min eingedampfen und komplett in der Browserkonsole machen. Für eine Einführung in Javascript OOP - und das sage ich mit über 10jähriger Erfahrung mit dieser Sprache - ist das hier eine echt lausige Arbeit eines Menschen, der sich offenbar gerne reden hört und anderen ihre Zeit stiehlt. Sry so sehe ich es nun mal! Für Anfänger in JS würde ich immer noch auf "Coding Train" verweisen oder - wenn jem eine deutschsprachige Empfehlung will: "Thytos" Letzterer macht auch gleich noch ein kleines CRUD-System mit minimalistischem Datenbankdesign in der Konsole.
Unser Informatikprof hat zu cdr immer "kudder" gesagt :)
Mit anderen Worten, die Class Syntax ist nichts anderes als syntaktischer Zucker. Und nein ich finde den OOP Ansatz von JavaScript nicht umständlich oder gar kompliziert. Im Gegenteil. Vor 30 Jahren war ich Systemadministrator auf Unix basierten Systemen wie ULTRIX MINIX SINIX und andere. Dort habe ich neben verschiedenen Shell selbstverständlich auch PERL benutzt. Und wer dessen OOP Ansatz mit bless und Co kennt, wird sich über die Einfachheit des OOP Ansatzes in JavaScript freuen. Aber wie immer ist es eine Frage der persönlichen Präferenz und der eigenen Historie, ob man ein sprach Konstrukt mag oder eben nicht.
@thenativeweb
2 жыл бұрын
[gr] Ja, syntaktischer Zucker, das trifft's 😊
Die Erklärung und das Video ist spitze. Danke dafür. Ich bin ein ziemlicher verfechter von C++ und kann deshalb nur festhalten (aus informationstechnischer Sicht): JS ist ziemlicher Schrott :)
@thenativeweb
Жыл бұрын
[gr] Danke für Deinen Kommentar 😊
Man sind hier fortgeschrittene Programmierer also ich komme schwer mit auch wenn er sich Mühe gibt er bringt mich schon zum teils durcheinander . Also die ersten 20 Minuten waren Müll 🗑 erkläre doch vernünftig was wie abläuft ständig die englischen Begriffe Dollar Zeichen obwohl es jquerry ist , dann diese komischen variablen die seit 1950 besteht CAR Und CDR … args ! Also ich komme schwer .
Danke!
@thenativeweb
2 жыл бұрын
[gr] Vielen, vielen Dank 😊
Danke!
@thenativeweb
6 ай бұрын
Vielen, vielen Dank ❤️
@wadiegg
6 ай бұрын
@@thenativeweb Großartiges Video