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

  • @MarkusDoedt
    @MarkusDoedt Жыл бұрын

    Danke! Habe viel Neues gelernt! Unglaublich tolles Video!

  • @thenativeweb

    @thenativeweb

    Жыл бұрын

    [gr] Vielen, vielen Dank - das freut uns sehr 🥰

  • @uselesscommentary5404
    @uselesscommentary54042 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen lieben Dank 😊

  • @devchannel5232
    @devchannel52322 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen, vielen Dank 😊

  • @besidesdepersonalise
    @besidesdepersonalise2 жыл бұрын

    Ich liebe diese Reihe ❤️ TDD Docker Kubernetes …

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Das freut mich, vielen Dank 😊

  • @domemvs
    @domemvs2 жыл бұрын

    Ich freue mich schon auf einen so qualitativ hochwertigen Content rund um Go!

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Danke schön 😊

  • @michaelrichter9408
    @michaelrichter94082 жыл бұрын

    Super Video zu JavaScript und OOP. Vor allen die Fallstricke zum Thema this sind super erklärt.Vielen Dank.

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Das freut mich, vielen Dank 😊

  • @psychedelic-chi
    @psychedelic-chi11 ай бұрын

    Erst jetzt wird mir einiges dank deiner Hilfe klar. Tolles Video zum Thema js OOP. Herlichen Dank!

  • @ikemkrueger
    @ikemkrueger2 жыл бұрын

    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“.

  • @BenjaminAster
    @BenjaminAster2 жыл бұрын

    1:32:04 Um Variablen in VSCode umzubenennen, kann man einfach F2 drücken.

  • @marinaegner
    @marinaegner2 жыл бұрын

    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.

  • @bobbymarley5111
    @bobbymarley51112 жыл бұрын

    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. 😁

  • @sephentos21525
    @sephentos215252 жыл бұрын

    Vielen lieben Dank für dieses informative Video!

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen lieben Dank 😊

  • @sinorteka762
    @sinorteka7622 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen Dank für Dein tolles Feedback, und natürlich auch für Deine Unterstützung 😊

  • @stevenkleist9111
    @stevenkleist91112 жыл бұрын

    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.

  • @qui-gonkenobi4574
    @qui-gonkenobi45742 жыл бұрын

    Ich liebe diesen Channel

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen, vielen Dank 😊

  • @Patrick-fs3wh
    @Patrick-fs3wh2 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen, vielen Dank 😊

  • @Lyrik-Klinge
    @Lyrik-Klinge2 жыл бұрын

    Meine Mutter sagte immer, man solle nicht fluchen... Ich mache es hier trotzdem: VERDAMMT gute Vermittlungskompetenz bei gutem Unterhaltungscharakter!

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen, vielen Dank 😊

  • @christianhorauf9958
    @christianhorauf99582 жыл бұрын

    Neu war für mich, dass man mit dem new Operator ein beliebiges Objekt zurück geben kann.👍

  • @arneweber5857
    @arneweber5857 Жыл бұрын

    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.

  • @longingbydesign
    @longingbydesign2 жыл бұрын

    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.

  • @sinorteka762
    @sinorteka7622 жыл бұрын

    Danke!

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen herzlichen Dank 😊

  • @hannes644
    @hannes644Ай бұрын

    Richtige geile Videos und Erklärungen :D danke vielmals. Wie hast du bei 1:40:30 die ganzen private hashtags # markiert und gelöscht?

  • @abergy87
    @abergy872 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Danke für Dein Feedback 😊

  • @DJTechnostyler
    @DJTechnostyler2 жыл бұрын

    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

    @DJTechnostyler

    2 жыл бұрын

    @@sirfakealot5041 Keine Ahnung, wo meine Antwort hin ist, aber das braucht man um Vererbungsketten on-the-fly zu manipulieren.

  • @DJTechnostyler

    @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.

  • @Sourcer3r
    @Sourcer3r2 жыл бұрын

    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

    @Sourcer3r

    2 жыл бұрын

    Somit ist "use strict"; in der ersten Zeile wieder ein noop.

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Ah okay, das ist mir in den Release-Notes entgangen, danke für die Aufklärung 😊

  • @thenativeweb

    @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.

  • @Furz35
    @Furz352 жыл бұрын

    setTimeout() und setInterval() kann man auch Parameter übergeben: setTimeout(function(bla) { console.log(bla.car()); , 1_000, this);

  • @Mehmet_Yentar
    @Mehmet_Yentar2 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Was kommt denn dabei heraus, wenn Du es ausprobierst 😉?

  • @fleckenfurz77

    @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.

  • @nitrovent
    @nitrovent2 жыл бұрын

    Unser Informatikprof hat zu cdr immer "kudder" gesagt :)

  • @jan-joseflinka5282
    @jan-joseflinka52822 жыл бұрын

    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

    @thenativeweb

    2 жыл бұрын

    [gr] Ja, syntaktischer Zucker, das trifft's 😊

  • @hanswurst2953
    @hanswurst2953 Жыл бұрын

    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

    @thenativeweb

    Жыл бұрын

    [gr] Danke für Deinen Kommentar 😊

  • @doktorsam7348
    @doktorsam73482 жыл бұрын

    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 .

  • @thomasspornraft2612
    @thomasspornraft26122 жыл бұрын

    Danke!

  • @thenativeweb

    @thenativeweb

    2 жыл бұрын

    [gr] Vielen, vielen Dank 😊

  • @wadiegg
    @wadiegg6 ай бұрын

    Danke!

  • @thenativeweb

    @thenativeweb

    6 ай бұрын

    Vielen, vielen Dank ❤️

  • @wadiegg

    @wadiegg

    6 ай бұрын

    @@thenativeweb Großartiges Video

Келесі