tag:forum.selfhtml.org,2005:/self Manöverkritik: OOP in JS – SELFHTML-Forum 2021-11-30T09:37:27Z https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793882?srt=yes#m1793882 Matthias Scharwies mscharwies@selfhtml.org 2021-11-24T04:59:52Z 2021-11-24T06:17:59Z Manöverkritik: OOP in JS <p>Guten Morgen!</p> <p><a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a> hatte im Februar einen Einstieg in die OOP gestartet, der hier diskutiert wurde:</p> <ul> <li><a href="https://forum.selfhtml.org/self/2021/feb/26/manoverkritik-zu-einsteiger-tutorial-oop-in-js/1784965#m1784965" rel="noopener noreferrer"> Manöverkritik zu Einsteiger-Tutorial OOP in JS</a></li> </ul> <p>Molilys Artikel-Reihe "<strong>Organisation von JavaScripten</strong>" von 2006 wird dieses Jahr 15. Sie war auch nie als durchgängiger Kurs bestimmt.</p> <p>Ich habe jetzt einmal eine überarbeitete Version veröffentlicht: <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP" rel="nofollow noopener noreferrer"><strong>JavaScript/Tutorials/OOP</strong></a></p> <ol> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Einstieg" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Einstieg</strong></a> <ul> <li>theoretisch; ohne Code</li> <li>Infografik (Klasse-Konstruktor-Objektinstanzen) kommt noch</li> </ul> </li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Objekte und ihre Eigenschaften</strong></a> <ul> <li>kontextualisiert mit Personen</li> <li>Live-Beispiele (um Änderungen gleich in der Konsole zu sehen)</li> <li><em><strong>Passen <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Unterobjekte" rel="nofollow noopener noreferrer">Kind-Objekte</a> in den Aufbau oder sollte man sie streichen / woanders einsetzen?</strong></em></li> </ul> </li> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Klassen und Vererbung</strong></a> <ul> <li>integriert Felix Kapitel mit @Wiko s Änderungen <strong>und</strong> der prototypischen Vererbung</li> <li>zuerst ES6, dann die prototypische V. aus ES3</li> </ul> </li> </ol> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Module_und_Kapselung" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Module und Kapselung</strong></a> <ul> <li>Einiges wie Unobtrusive JavaScript steht mittlerweile im Einstieg in JS; YUI und Mootools kennen nur noch die Älteren, ich würde es hier ebenso machen:</li> <li>zuerst ES6 erklären, dann eben die konventionellen Sachen wie Revealing Module Pattern</li> <li><em><strong>Wie würdet ihr die Abgrenzung zu den anderen Kapiteln sehen?</strong></em></li> <li>static wird bereits bei Klassen und Vererbung gelistet.</li> <li>Closures werden hier und im nächsten Kapitel bei <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objektverf%C3%BCgbarkeit_und_this" rel="nofollow noopener noreferrer">this </a>besprochen</li> </ul> </li> </ul> <p>Ich würde neben dem Einstieg im Kurs in sich geschlossene Kapitel wie this und Objektabfragen behalten; dazu könnte man noch <a href="https://wiki.selfhtml.org/wiki/JavaScript/Destrukturierung" rel="nofollow noopener noreferrer">Destrukturierung</a> und <a href="https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Proxy" rel="nofollow noopener noreferrer">Proxy</a> (in <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> s Benutzernamensraum) verlinken.</p> <p>Ich frag euch heut abend mal am Stammtisch aus!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793883?srt=yes#m1793883 Matthias Scharwies mscharwies@selfhtml.org 2021-11-24T05:36:20Z 2021-11-24T06:08:32Z Manöverkritik: OOP in JS <p>Guten Morgen!</p> <blockquote> <ol> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Einstieg" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Einstieg</strong></a> <ul> <li>Infografik (Klasse-Konstruktor-Objektinstanzen) kommt noch</li> </ul> </li> </ol> </blockquote> <ol> <li>Wo soll die hin?</li> <li>Was soll an weiterem Text noch rein?</li> </ol> <p><a href="/images/ed7f5994-4cec-11ec-a855-b42e9947ef30.svg" rel="noopener noreferrer"><img src="/images/ed7f5994-4cec-11ec-a855-b42e9947ef30.svg" alt="OOP" title="OOP" loading="lazy"></a></p> <p>Ich würde evtl. über die Fabrik dann noch einen Prototypen legen.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793884?srt=yes#m1793884 Tabellenkalk 2021-11-24T07:10:37Z 2021-11-24T07:10:37Z Manöverkritik: OOP in JS <p>Hallo,</p> <p>sieht prima aus, Danke!</p> <p>In der Vorstellung des <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Konstruktoren" rel="nofollow noopener noreferrer">Konstruktors</a>, fehlt da in der Funktion 'sayname' jeweils das 'this' bei den Namen?</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793942?srt=yes#m1793942 Felix Riesterer https://felix-riesterer.de 2021-11-25T23:35:33Z 2021-11-25T23:35:33Z Manöverkritik: OOP in JS <p>Lieber Matthias,</p> <blockquote> <p>Ich habe jetzt einmal eine überarbeitete Version veröffentlicht: <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP" rel="nofollow noopener noreferrer"><strong>JavaScript/Tutorials/OOP</strong></a></p> </blockquote> <p>mir gefällt die Ausführlichkeit. Da ich mit keinem echten Anfänger beide Vorlagen anschauen und ausprobieren konnte, kann ich nicht sicher beurteilen, welche Ausführlichkeit an welcher Stelle welches Verständnis erleichtert. Mir fehlt es zur Zeit schlicht an geeigneten Lerngruppen, um das zu evaluieren.</p> <blockquote> <ol start="3"> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Klassen und Vererbung</strong></a> <ul> <li>integriert Felix Kapitel mit @Wiko s Änderungen <strong>und</strong> der prototypischen Vererbung</li> <li>zuerst ES6, dann die prototypische V. aus ES3</li> </ul> </li> </ol> </blockquote> <p>Mir fällt da etwas im Kapitel <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung#Methoden_f.C3.BCr_Events" rel="nofollow noopener noreferrer">1.2.2 Methoden für Events</a> auf, das ich hier zur Diskussion stellen möchte.</p> <pre><code class="block language-js"><span class="token function">hit</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> classThis <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>self<span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token string">"Ich bin "</span> <span class="token operator">+</span> classThis<span class="token punctuation">.</span>_alter <span class="token operator">+</span> <span class="token string">" Jahre alt."</span> <span class="token punctuation">}</span> </code></pre> <p>Hier soll offensichtlich ein Event verarbeitet werden. Soweit klar. Was mich stört, ist die Annahme, dass man diese Objektmethode zwingend so verwendet:</p> <pre><code class="block language-js">object<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span>p<span class="token punctuation">.</span>click<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Diese Einbindung hat tatsächlich das Problem, dass ich innerhalb der Objektmethode <code>hit(event)</code> ein Problem mit dem Schlüsselwort <code>this</code> habe. Meiner Meinung nach ist aber die beste Lösung eben nicht, in <code>hit(event)</code> mit <code>this.self</code> zu hantieren, sondern die Einbindung so vorzunehmen, dass es das überhaupt nicht erst braucht:</p> <pre><code class="block language-js"><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> alter</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span> <span class="token function">hit</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Ich bin "</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_alter <span class="token operator">+</span> <span class="token string">" Jahre alt."</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">var</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">"Frizzy"</span><span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> object <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"alter"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> object<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> p<span class="token punctuation">.</span><span class="token function">hit</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>In altmodischerer Schreibweise wäre die letzte Zeile eher so:</p> <pre><code class="block language-js">object<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> p<span class="token punctuation">.</span><span class="token function">hit</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Damit ist der <code>this</code>-Kontext in der Objektmethode von <code>Person</code> genau der, den man dort gerne haben möchte. Und das Kapitel "Methoden für Events" sollte eher "Umgang mit dem <code>this</code>-Kontext bei Verwendung von Events" lauten.</p> <p>Inwiefern man in einer Objektmethode <code>this.self</code> verwenden kann und wann man so etwas wirklich benötigt, ist eine andere Frage, die meiner Meinung nach an dieser Stelle das Anfängertutorial eher überfrachtet, als das Verständnis (wir sind inhaltlich noch immer ziemlich am Anfang!) zu stärken.</p> <p>Was meint ihr dazu?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793966?srt=yes#m1793966 Rolf B 2021-11-26T16:57:06Z 2021-11-26T16:57:06Z Manöverkritik: OOP in JS <p>Hallo Matthias,</p> <p>ich stolpere nochmal über die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Unterobjekte" rel="nofollow noopener noreferrer">Unterobjekte</a>.</p> <p>Ich weiß, dass man hier an einem sehr frühen Punkt ist, aber trotzdem müsste man eigentlich zwischen abhängigen und unabhängigen Objektbeziehungen unterscheiden. Um beim Beispiel zu bleiben: Ein Baby ist - vor der Geburt - von seiner Mutter abhängig - kommt der erwähnte Bus, sind beide tot. Die Mutter könnte aber auch ein Objekt "Handtasche" haben, mit Inhalten wie Ausweis, Autoschlüssel und Pfefferspray. Besagter Bus kann die Mutter töten, aber die Handtasche existiert als Objekt weiter. In beiden Fällen liegt eine Assoziation vor, aber das Baby ist vom Typ Komposition ("Y is-part-of X") und die Handtasche vom Typ Aggregation ("X has-a Y"). Das Baby ist deshalb auch ein interessantes Beispiel, denn ab einem gewissen Moment wechselt es seine Assoziationsart von part-of zu has-a.</p> <p>So richtig problematisch ist an dieser Stelle der Scope. Objektbeziehungen erschaffen keinen Scope - das passiert beim Schachteln von Funktionen. Eine Funktion Y, die innerhalb einer Funktion X definiert wird, kann auf die Daten von X zugreifen (was eine grobe Vereinfachung darstellt, mit Details schmeißt das Wiki beim Them Closures um sich). Bei Eltern- und Kindobjekt dagegen kommt es darauf an, welche Verknüpfung erzeugt worden ist. Wenn die Mutter ein Property "baby" enthält, kann die Mutter auf das Kindobjekt zugreifen. Das Kind kann damit existieren, ohne etwas von der Mutter zu wissen. Wenn das Kindobjekt ein Property "mother" bekommt, kann es auch auf seine Mutter zugreifen. Das ist was ganz anderes.</p> <p>Eine gute Formulierung für den Abschnitt habe ich noch nicht; ich muss jetzt erstmal weg und denke später nochmal drüber nach.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793885?srt=yes#m1793885 Matthias Scharwies mscharwies@selfhtml.org 2021-11-24T07:13:35Z 2021-11-24T07:13:35Z Manöverkritik: OOP in JS <p>Servus!</p> <blockquote> <p>Hallo,</p> <p>sieht prima aus, Danke!</p> <p>In der Vorstellung des <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Konstruktoren" rel="nofollow noopener noreferrer">Konstruktors</a>, fehlt da in der Funktion 'sayname' jeweils das 'this' bei den Namen?</p> </blockquote> <p>OOPs - danke!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793946?srt=yes#m1793946 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-26T07:41:34Z 2021-11-26T07:49:33Z Manöverkritik: OOP in JS <p>@@Felix Riesterer</p> <blockquote> <p>Mir fällt da etwas im Kapitel <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung#Methoden_f.C3.BCr_Events" rel="nofollow noopener noreferrer">1.2.2 Methoden für Events</a> auf, das ich hier zur Diskussion stellen möchte.</p> <pre><code class="block language-js"><span class="token function">hit</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> classThis <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>self<span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token string">"Ich bin "</span> <span class="token operator">+</span> classThis<span class="token punctuation">.</span>_alter <span class="token operator">+</span> <span class="token string">" Jahre alt."</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Da fällt mir noch was auf.</p> <p>Die umständliche, unübersichtliche Schreibweise mit String zusammenbasteln sollte nicht mehr verwendet werden, sondern ein <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals" lang="en" rel="nofollow noopener noreferrer">template literal</a>:</p> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_alter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Jahre alt.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> <p><em>„Aber der IE!“</em> – <em lang="en">„Shut up!“</em></p> <p>Noch besser: mit nicht umbrechendem Leerzeichen zwischen Zahl und Einheit:</p> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_alter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u{A0}Jahre alt.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> <p> LLAP</p> <p>PS: Wer hat da <code class="language-css"><span class="token selector">code</span> <span class="token punctuation">{</span> <span class="token property">overflow</span><span class="token punctuation">:</span> scroll-x <span class="token punctuation">}</span></code> ins Forum-Stylesheet eingebaut? Das sieht ja furchtbar aus.</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793949?srt=yes#m1793949 Rolf B 2021-11-26T09:04:32Z 2021-11-26T09:04:32Z Manöverkritik: OOP in JS <p>Hallo Felix,</p> <p>Was meint ihr dazu?</p> <p>(1) Sowohl Wiki als auch Du sind im Irrtum mit der Aussage, dass das this-Objekt in diesem Fall das Eventobjekt ist. Das Eventobjekt wird grundsätzlich als Parameter übergeben. Der Wert von <code>this</code> hängt von der Art der Registrierung ab.</p> <p>Das ist in einer unheiligen Allianz von DOM und WebIDL Spec exakt festgelegt. Die WebIDL Spec hat einen Abschnitt "Call a user object's operation", die den Umgang mit einem Callback festlegt, und in der DOM Spec steht, dass beim Aufruf eines Eventlisteners für das registrierte Eventlistener-Objekt "call a user object's operation" mit der Operation "handleEvent", Argument "event-Objekt" und thisArg "currentTarget" auszuführen sei. Und in der WebIDL Spec steht dann, dass das Objekt entweder "Callable" sein kann oder ein Objekt mit einer Eigenschaft, die dem Operationsnamen entspricht. Im zweiten Fall wird thisArg durch das EventListener-Objekt ersetzt (<a href="https://webidl.spec.whatwg.org/#call-a-user-objects-operation" rel="nofollow noopener noreferrer">WEBIDL 3.11, call a user object's operation, Step 10</a>).</p> <p>Demnach: Registriert man eine Funktion, enthält this den Wert von event.currentTarget (identisch mit dem Objekt, auf dem der Listener registriert wurde). Registriert man ein EventListener-Objekt, enthält this dieses Objekt.</p> <p>Das ist auch sinnvoll, denn andernfalls käme man in der handleEvent-Methode nicht an die übrigen Eigenschaften des EventListener-Objekts heran.</p> <p>Ich habe das vor ein paar Tagen auch <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener" rel="nofollow noopener noreferrer">hier</a> notiert.</p> <blockquote> <p>Was mich stört</p> </blockquote> <p>Mich auch. Und dazu stört mich so einiges mehr.</p> <p>(1) Anerkannte Application Patterns werden ignoriert</p> <ul> <li>Person ist Model, nicht ViewModel, da gehören keine Handler für Klicks hin</li> <li>Das click-Objekt der Person legt die Reaktion des Objekts auf einen Klick fest. Wie ein UI-Ereignis zu behandeln ist, entscheidet im MVVM Pattern der View und bei MVC der Controller. Nicht das ViewModel, nicht das Model.</li> </ul> <p>(2) Verletzung von SRP (Single Responsibility Principle).</p> <ul> <li>Die hit-Methode muss sich um zwei verschiedene Dinge kümmern: Ermitteln des richtigen <code>this</code> und Behandeln des Click-Events. Das ist falsch.</li> </ul> <p>(3) Schlechte Namensgebung. Wieso heißt eine Methode, die das Alter anzeigt, "hit", und nicht "zeigeAlter"?</p> <p>(4) Ich würde gerne eine Klarstellung haben - außerhalb des Wikis - ob ein EventListener Objekt noch Stand der Technik ist. Dieses Interface findet sich bereits im DOM Level 2 von 2003. Seitdem wurde die bind-Methode (ECMAScript 5.1, 2011) und Pfeilfunktionen (ECMAScript 2015) eingeführt, die das Problem ebenfalls lösen können und es - meine ich - eleganter tun.</p> <p>MDN schreibt:</p> <blockquote> <p>Note: Due to the need for compatibility with legacy content, EventListener accepts both a function and an object with a handleEvent() property function.</p> </blockquote> <p>Angesichts der obigen Zeitleiste ist das Objekt mit handleEvent() Property die Legacy, nicht die Funktion. Wollen wir etwas promoten, das zwecks "compatibility with legacy content" existiert?</p> <p>Die Pfeilfunktion wurde bereits von Felix gezeigt. Mit bind sähe es so aus:</p> <pre><code class="block language-js">object<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> p<span class="token punctuation">.</span><span class="token function">zeigeAlter</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>und natürlich gibt's auch die gute alte function-Expression als Fallback.</p> <p>Bind statt Pfeilfunktion hat eine Existenzberechtigung für Seiten, die Altbrowser unterstützen wollen/müssen. In Browsern, die bind nicht unterstützen, sollte man sich JavaScript besser nicht antun…</p> <p>Aus meiner Sicht ist ein eventListener-Objekt dann und nur dann sinnvoll, wenn man ein bestimmtes Event unabhängig von einem Modellobjekt behandeln will, und eine Funktion dafür nicht ausreicht. Dafür kann es viele Anlässe geben. Aber zur reinen Delegation eines Events an eine Objektmethode ist es der falsche Ansatz, weil es dafür mittlerweile standardisierte Möglichkeiten gibt.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794022?srt=yes#m1794022 JürgenB https://www.j-berkemeier.de 2021-11-29T12:27:59Z 2021-11-29T12:27:59Z Manöverkritik: OOP in JS <p>Hallo,</p> <blockquote> <p>Mir fällt da etwas im Kapitel <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung#Methoden_f.C3.BCr_Events" rel="nofollow noopener noreferrer">1.2.2 Methoden für Events</a> auf, das ich hier zur Diskussion stellen möchte.</p> </blockquote> <p>ich muss zu meiner Schande gestehen, das ich in diesem Unterkapitel zwar das this-Problem, sonst aber nichts verstanden habe.</p> <p>Was macht</p> <pre><code class="block language-javascript"><span class="token keyword">this</span><span class="token punctuation">.</span>click <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">handleEvent</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>hit<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>und warum wird die Methode <code>click</code> im constructor definiert?</p> <p>Wer bearbeitet den return-Wert von <code>hit</code>?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793947?srt=yes#m1793947 Der Martin 2021-11-26T07:57:11Z 2021-11-26T08:43:36Z Manöverkritik: OOP in JS <p>Hallo Gunnar,</p> <blockquote> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_alter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> Jahre alt.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> <p><em>„Aber der IE!“</em> – <em lang="en">„Shut up!“</em></p> </blockquote> <p> </p> <blockquote> <p>Noch besser: mit nicht umbrechendem Leerzeichen zwischen Zahl und Einheit:</p> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_alter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u{A0}Jahre alt.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Schöner is' das. Vor allem dann, wenn für die Einheit nur das Einheitenzeichen notiert wird. Hier, wo die Einheit als ganzes Wort ausgeschrieben ist, würde ich auch einen Umbruch verschmerzen.</p> <p>May the Schwartz be with you<br>  Martin</p> <div class="signature">-- <br> Theorie ist, wenn eigentlich jeder weiß, wie's gehen müsste, und es geht doch nicht.<br> Praxis ist, wenn's geht, obwohl es keiner so richtig versteht.<br> Bei uns sind Theorie und Praxis vereint: Nichts geht, und keiner weiß, warum. </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793948?srt=yes#m1793948 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-26T08:43:20Z 2021-11-26T08:43:36Z Manöverkritik: OOP in JS <p>@@Der Martin</p> <blockquote> <blockquote> <p>Noch besser: mit nicht umbrechendem Leerzeichen zwischen Zahl und Einheit:</p> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_alter<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u{A0}Jahre alt.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Schöner is' das. Vor allem dann, wenn für die Einheit nur das Einheitenzeichen notiert wird.</p> </blockquote> <p>In dem Falle wäre ein schmales nicht umbrechendes Leerzeichen angebracht:</p> <pre><code class="block language-js"> <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Ich bin </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>classThis<span class="token punctuation">.</span>_gewicht<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u{202F}kg schwer.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span> </code></pre> <p>Siehe <a href="https://codepen.io/gunnarbittersmann/pen/abwEdZz?editors=1000" rel="noopener noreferrer">Codepen: Hobbits</a> (gezeigt in <a href="https://noti.st/gunnarbittersmann/9tIhwE/til-about-xhtml-ab-css-escapes-about-svg-in-js#sIMKwQo" rel="nofollow noopener noreferrer">diesen Vortrag</a>)</p> <p> LLAP</p> <p>PS: Mir ist der Unterschied zwischen Masse und Gewicht bewusst. Ich wollte es hier nicht zu schwer machen. <em lang="en">(No pun intended.)</em></p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793950?srt=yes#m1793950 JürgenB https://www.j-berkemeier.de 2021-11-26T09:56:59Z 2021-11-26T09:56:59Z Manöverkritik: OOP in JS <p>Hallo Gunnar,</p> <blockquote> <p>In dem Falle wäre ein schmales nicht umbrechendes Leerzeichen angebracht:</p> </blockquote> <p>gibt es inzwischen Browser, die das auch schmal anzeigen?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793952?srt=yes#m1793952 Rolf B 2021-11-26T10:44:26Z 2021-11-26T10:44:26Z Manöverkritik: OOP in JS <p>Hallo Rolf,</p> <p>Überarbeitet: <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#this" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#this</a></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793956?srt=yes#m1793956 Rolf B 2021-11-26T12:04:43Z 2021-11-26T12:04:43Z Manöverkritik: OOP in JS <p>Hallo Rolf,</p> <p>Konstruktoren überarbeitet, Abschnitt über Prototypen hinzugefügt.</p> <p>Da stand einiges, was falsch war. Dass Prototypen ein Bauplan sind und das Instanzobjekt eine Kopie des Prototypen - nein. Definitiv nein. Die Bauplanmetapher gilt für Klassen der OOP, aber nicht für Prototypen.</p> <p>Die Umleitung für [[Prototyp]] und [[Prototype]] könnte nun auf das Prototyp-Kapitel dieses Artikels zeigen. Die aktuelle Zielposition ist ja ohnehin auf der Kippe.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793957?srt=yes#m1793957 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-26T12:14:46Z 2021-11-26T12:14:46Z Manöverkritik: OOP in JS <p>@@JürgenB</p> <blockquote> <p>gibt es inzwischen Browser, die das auch schmal anzeigen?</p> </blockquote> <p>Öhm, ja:</p> <blockquote> <blockquote> <p>Siehe <a href="https://codepen.io/gunnarbittersmann/pen/abwEdZz?editors=1000" rel="noopener noreferrer">Codepen: Hobbits</a></p> </blockquote> </blockquote> <p>Und das Problem sind wohl nicht Browser, sondern dass die verwendeten Fonts auch tatsächlich eine Glyphe für U+202F bereitstellen – und zwar eine mit anderer Breite als für U+0020/U+00A0.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793962?srt=yes#m1793962 JürgenB https://www.j-berkemeier.de 2021-11-26T13:12:28Z 2021-11-26T13:12:28Z Manöverkritik: OOP in JS <p>Hallo Gunnar,</p> <blockquote> <blockquote> <p>gibt es inzwischen Browser, die das auch schmal anzeigen?</p> </blockquote> <p>Öhm, ja:</p> <blockquote> <blockquote> <p>Siehe <a href="https://codepen.io/gunnarbittersmann/pen/abwEdZz?editors=1000" rel="noopener noreferrer">Codepen: Hobbits</a></p> </blockquote> </blockquote> <p>Und das Problem sind wohl nicht Browser, sondern dass die verwendeten Fonts auch tatsächlich eine Glyphe für U+202F bereitstellen – und zwar eine mit anderer Breite als für U+0020/U+00A0.</p> </blockquote> <p>betrachtet im iPhone und am W10-PC mit dem FF 78.10.0esr und mit dem Chrome 96: ich sehe keinen Unterschied .</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793965?srt=yes#m1793965 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-26T14:40:11Z 2021-11-29T14:25:35Z Manöverkritik: OOP in JS <p>@@JürgenB</p> <blockquote> <p>betrachtet im iPhone und am W10-PC mit dem FF 78.10.0esr und mit dem Chrome 96: ich sehe keinen Unterschied .</p> </blockquote> <p>Mir dämmert’s: Ich hatte den Codepen ja erstellt, um ihn bei besagtem Vortrag zu zeigen. Als Schrift verwende ich Fira Sans, die habe ich auch lokal installiert. Du vermutlich nicht, deshalb wird’s bei dir in einer anderen Schriftart gerendert, wo womöglich kein Unterschied zwischen normalbreitem und schmalem Leerzeichen ist.</p> <p>Bei mir sieht’s (bei entsprechender Viewportbreite) so aus:</p> <p><img src="/images/0894520e-4ec6-11ec-a566-b42e9947ef30.png" alt="Screenshot" loading="lazy"></p> <p>Muss wohl nochmal nachlesen, wie man Webfonts in CodePen nutzen kann.</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793978?srt=yes#m1793978 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-28T10:56:14Z 2021-11-28T10:56:14Z Manöverkritik: OOP in JS <p>@@Gunnar Bittersmann</p> <blockquote> <p>Als Schrift verwende ich Fira Sans, die habe ich auch lokal installiert. Du vermutlich nicht, deshalb wird’s bei dir in einer anderen Schriftart gerendert, wo womöglich kein Unterschied zwischen normalbreitem und schmalem Leerzeichen ist. […]</p> <p>Muss wohl nochmal nachlesen, wie man Webfonts in CodePen nutzen kann.</p> </blockquote> <p>Wird <a href="https://codepen.io/gunnarbittersmann/pen/abwEdZz" rel="noopener noreferrer">der Pen</a> jetzt auch bei euch in Fira Sans gesetzt?</p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793967?srt=yes#m1793967 Rolf B 2021-11-26T23:25:53Z 2021-11-26T23:25:53Z Manöverkritik: OOP in JS <p>Hallo Rolf,</p> <p>ich würde den ganzen Abschnitt am liebsten durch <a href="https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Objektbeziehungen" rel="nofollow noopener noreferrer">dies hier</a> ersetzen, bin damit aber noch nicht ganz zufrieden.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793969?srt=yes#m1793969 Matthias Scharwies mscharwies@selfhtml.org 2021-11-27T09:34:53Z 2021-11-27T09:34:53Z Manöverkritik: OOP in JS <p>Servus!</p> <blockquote> <blockquote> <blockquote> <ol start="2"> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften" rel="nofollow noopener noreferrer">JavaScript/Tutorials/OOP/<strong>Objekte und ihre Eigenschaften</strong></a> <ul> <li>kontextualisiert mit Personen</li> <li>Live-Beispiele (um Änderungen gleich in der Konsole zu sehen)</li> <li><em><strong>Passen <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Unterobjekte" rel="nofollow noopener noreferrer">Kind-Objekte</a> in den Aufbau oder sollte man sie streichen / woanders einsetzen?</strong></em></li> </ul> </li> </ol> </blockquote> </blockquote> </blockquote> <blockquote> <p>ich würde den ganzen Abschnitt am liebsten durch <a href="https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/Objektbeziehungen" rel="nofollow noopener noreferrer">dies hier</a> ersetzen, bin damit aber noch nicht ganz zufrieden.</p> </blockquote> <p>Für mich sieht's gut aus. Die (evtl. doppelt vorhandenen) Adressen sind auch eine gute Idee.</p> <p>Ich weiß aber nicht, wie viel ins erste Praxis-Kapitel passt (jetzt sind noch Prototypen dabei).</p> <p>Evtl. sollten wir es eben auf mehrere, thematisch getrennte Kapitel aufteilen. Nicht alles muss im ersten Kapitel in der ersten Stunde behandelt werden.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793970?srt=yes#m1793970 Rolf B 2021-11-27T20:49:35Z 2021-11-27T20:49:35Z Manöverkritik: OOP in JS <p>Hallo Matthias,</p> <p>ja, guter Plan. Eigenschaften und Methoden in Objekten ohne Konstruktoren, dann Konstruktoren und Prototypen, dann Objektbeziehungen. Das sind 3 nicht zu lange Artikel, und man kann sie ggf. ausbauen.</p> <p>Ich würde DANN aber bei Objekte und Eigenschaften noch einen Abschnitt anfügen wollen, als "optionale Lektüre", der auf defineProperty eingeht, womit man readonly-Properties sowie getter und setter erzeugen kann.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793974?srt=yes#m1793974 Rolf B 2021-11-28T00:54:49Z 2021-11-28T01:04:04Z Manöverkritik: OOP in JS <p>Hallo Matthias,</p> <p>ich hatte jetzt drei Stunden lang im Objekte+Eigenschaften Artikel etliche Änderungen vorgenommen, ohne zwischenzuspeichern. Kann man ja nicht, ohne zu veröffentlichen. Und jedesmal einen Artikel in den Userspace zu legen ist lästig. Dem Wiki fehlt eine "Autosave Draft" Funktion, wie im Forum.</p> <p>Denn: wie es mir REGELMÄSSIG irgendwann passiert - ich bin irrtümlich auf Strg+W gekommen und das Browsertab geht ohne Rückfrage zu. Beim Close eines Tab fragt er ja wenigstens rück, aber Strg+W ist der ultimative Boss-Key. Der Idiot, der das festgelegt hat, gehört einen Kopf kürzer gemacht, und zwar an den Füßen, damit er was davon hat! Diese Taste ist viel zu schnell irrtümlich erwischt.</p> <p>Für Chrome habe ich jetzt den Tipp gefunden, nach chrome://extensions zu gehen und die Tastenkombination einer Extension zuzuweisen, die nicht relevantes tut. Bei mir ist es der Google Drive Anwendungslauncher. Und Strg+W ist wirklungslos. Endlich.</p> <p>Oh! Nachtrag: Strg+Shift+T - reopen closed tab. Klappt auch mehrfach, und hat mich gerettet. Hatte ich vorhin probiert, aber per Maus im Menü, und nur den Stand VOR meiner Bearbeitung gefunden.</p> <p>D.h. mein Text ist wieder da, und steht auf meiner Benutzerseite unter Benutzer:Rolf B/Objekte.</p> <p>Was ich eigentlich wissen wollte: welche Herkunft hat der aktuelle Text eigentlich? Ist das von Wiko, und wenn ich darin grob ändere, fange ich mir Ärger ein? Oder ist es alter Molily Text und Freiwild?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793972?srt=yes#m1793972 Der Martin 2021-11-27T21:44:26Z 2021-11-27T21:44:26Z Manöverkritik: OOP in JS <p>Hallo Rolf,</p> <blockquote> <p>Ich würde DANN aber bei Objekte und Eigenschaften noch einen Abschnitt anfügen wollen, als "optionale Lektüre", der auf defineProperty eingeht, womit man readonly-Properties sowie getter und setter erzeugen kann.</p> </blockquote> <p>ich bin ja froh, dass du das als <em>optionale Lektüre</em> einordnest. Denn ich halte mich selbst nicht für ganz ahnungslos in Javascript (also nicht Fußgänger, mindestens schon Radfahrer), aber das ist dann auch für mich schon relativ schwere Kost.</p> <p>May the Schwartz be with you<br>  Martin</p> <div class="signature">-- <br> Theorie ist, wenn eigentlich jeder weiß, wie's gehen müsste, und es geht doch nicht.<br> Praxis ist, wenn's geht, obwohl es keiner so richtig versteht.<br> Bei uns sind Theorie und Praxis vereint: Nichts geht, und keiner weiß, warum. </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793975?srt=yes#m1793975 Matthias Scharwies mscharwies@selfhtml.org 2021-11-28T02:17:46Z 2021-11-28T02:34:20Z Manöverkritik: OOP in JS <p>Lieber Rolf!</p> <blockquote> <p>D.h. mein Text ist wieder da, und steht auf meiner Benutzerseite unter Benutzer:Rolf B/Objekte.</p> </blockquote> <p>Der sieht gut aus, …</p> <blockquote> <p>Was ich eigentlich wissen wollte: welche Herkunft hat der aktuelle Text eigentlich? Ist das von Wiko, und wenn ich darin grob ändere, fange ich mir Ärger ein? Oder ist es alter Molily Text und Freiwild?</p> </blockquote> <p>Das ist, wie ich <a href="https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793882#m1793882" rel="noopener noreferrer">oben</a> oben geschrieben hatte, von mir.</p> <p>Ich hatte im März/Mai 2016 ja schon einmal angefangen, den Molily-Text durch eine eigene Variante zu ersetzen. Damals hatten parallel @Orlok <a href="https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Object#Referenzierung" rel="nofollow noopener noreferrer">JavaScript/Objekte/Object</a> und Du <a href="https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/tempObjekteEigenschaften" rel="nofollow noopener noreferrer">Benutzer:Rolf_b/tempObjekteEigenschaften</a> entwickelt, in den ich immer wieder reinschaue.</p> <p>In der Neufassung vom August 2020, die ich nur im Test-Wiki angefangen hatte und die durch Felix' OOP-Tutorial im Feb 2021 dort erst mal liegengeblieben war, wollte ich zeigen, wie man mit der Konsole eben gleich untersuchen kann, wie Objekte aufgebaut sind. Das habe ich in einem Tutorial / Blog-Post bei Dillion Megida gesehen, das ich auch als <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#cite_note-2" rel="nofollow noopener noreferrer">Fußnote verlinkt habe</a>.</p> <p>Ich hatte versucht den Spagat zu schaffen. Objekte richtig zu erklären und das Unnötige wegzulassen, bzw Grundlagen, die bereits in den Anfänger-Tutorials stehen, passend zu verlinken.</p> <p>Was ich nicht in ein Fortgeschrittenen-Tutorial einbauen würde, wäre die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#Objekte" rel="nofollow noopener noreferrer">Diskussion const oder let</a>, die ich als <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Objekte_und_ihre_Eigenschaften#cite_note-1" rel="nofollow noopener noreferrer">Fußnote erwähnt</a> habe, sowie die Arbeit mit der Konsole / Console, die ja im Kurs <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg/Programmieren_und_Debuggen" rel="nofollow noopener noreferrer">Einstieg in JavaScript</a> erklärt wird. <sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p> <hr> <p>Wiko hat Felix' <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung" rel="nofollow noopener noreferrer">Klassen_und_Vererbung</a> überarbeitet und durch <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Klassen_und_Vererbung#Methoden_f.C3.BCr_Events" rel="nofollow noopener noreferrer">Methoden_für_Events</a> erweitert. Er möchte dort auch weitermachen.</p> <hr> <p>Was mir am ganzen Kurs noch fehlt, ist neben den Erklärungen ein Projekt, das man zusammen mit dem Leser entwickelt. Da hatte ich seit 2016 eben einen Vokabeltrainer im Auge, dessen JSON-Struktur dann auch erklärt worden wäre. So hätte man einen roten Faden und wäre nicht versucht, alle Alternativen in den Text zu integrieren.</p> <p>Da jetzt die molily-Texte im Kurs integriert sind, um Dopplungen zu vermeiden, werde ich (aber erst zum Jahreswechsel) ein <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP/Autorennen" rel="nofollow noopener noreferrer">Autorennen</a> programmieren.</p> <p>Früher ging sowas mit Benzin, heute wohl eher mit Akku und Super-Charger. Im Netz geht alles mit canvas; evtl. kann man wenigstens die Autos und den Hintergrund mit SVG bauen.</p> <pre><code class="block language-javascript"><span class="token keyword">function</span> <span class="token function">Auto</span><span class="token punctuation">(</span><span class="token parameter">startpos<span class="token punctuation">,</span> benzin<span class="token punctuation">,</span> startgeschwindigkeit</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>s <span class="token operator">=</span> startpos<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>benzin <span class="token operator">=</span> benzin<span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>v <span class="token operator">=</span> startgeschwindigkeit<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Dieses Tutorial ist oben in der {{Vorlage:Text-Info}} als vorausgesetztes Wissen verlinkt. Der Link auf [[Seiteninspektor]] im Text führt auf <a href="https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen" rel="nofollow noopener noreferrer">Grundlagen/Webprojekte/testen</a>, wo der Seiteninspektor erst im 3. Absatz und da nur für HTML erklärt wird. Das könnte/sollte man ändern. <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793976?srt=yes#m1793976 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2021-11-28T06:16:54Z 2021-11-28T06:16:54Z Manöverkritik: OOP in JS <p>@@Rolf B</p> <blockquote> <p>Denn: wie es mir REGELMÄSSIG irgendwann passiert - ich bin irrtümlich auf Strg+W gekommen und das Browsertab geht ohne Rückfrage zu.</p> </blockquote> <p>Passiert mir auch desöfteren. Bei mir ist [alt][shift][W] die Tastenkombination fürs öffnende Anführungszeichen „. Wenn ich statt [alt] das daneben liegende [cmd] erwische, ist nicht nur das Browsertab weg ([cmd][W]), sondern wegen [shift] gleich das ganze Browserfenster. </p> <p> LLAP</p> <div class="signature">-- <br> <em>„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“</em><br> — Joachim Gauck über Impfgegner </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793977?srt=yes#m1793977 Der Martin 2021-11-28T07:53:47Z 2021-11-28T07:53:47Z Manöverkritik: OOP in JS <p>Moin,</p> <blockquote> <p>Denn: wie es mir REGELMÄSSIG irgendwann passiert - ich bin irrtümlich auf Strg+W gekommen und das Browsertab geht ohne Rückfrage zu. Beim Close eines Tab fragt er ja wenigstens rück, aber Strg+W ist der ultimative Boss-Key. Der Idiot, der das festgelegt hat, gehört einen Kopf kürzer gemacht, und zwar an den Füßen, damit er was davon hat! Diese Taste ist viel zu schnell irrtümlich erwischt.</p> </blockquote> <p>wenn du den gefunden hast, sag Bescheid! Dann sammle ich ein paar Kilo Katzendreck.<br> Ehrlich, so eine dämliche Idee! Dafür gibt's doch seit ewigen Zeiten schon Ctrl-F4.</p> <p>May the Schwartz be with you<br>  Martin</p> <div class="signature">-- <br> Theorie ist, wenn eigentlich jeder weiß, wie's gehen müsste, und es geht doch nicht.<br> Praxis ist, wenn's geht, obwohl es keiner so richtig versteht.<br> Bei uns sind Theorie und Praxis vereint: Nichts geht, und keiner weiß, warum. </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793980?srt=yes#m1793980 JürgenB https://www.j-berkemeier.de 2021-11-28T16:34:32Z 2021-11-28T16:34:32Z Manöverkritik: OOP in JS <p>Hallo Gunnar,</p> <p>auf meinem iPhone sind die schmalen Leerzeichen jetzt schmal.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793983?srt=yes#m1793983 JürgenB https://www.j-berkemeier.de 2021-11-28T17:15:13Z 2021-11-28T17:15:13Z Manöverkritik: OOP in JS <p>Hallo Gunnar,</p> <blockquote> <p>... Fira Sans ...?</p> </blockquote> <p>ich habe mir gerade die <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Tabellen_dynamisch_sortieren#Das_fertige_Javascript" rel="nofollow noopener noreferrer">Tabelle zum Sortierer im Wiki</a> angesehen. Die Seite ist in Helvetica gesetzt, und in meinem Safari werden die Tausendertrenner schmal angezeigt.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794034?srt=yes#m1794034 Felix Riesterer https://felix-riesterer.de 2021-11-29T14:00:54Z 2021-11-29T14:00:54Z Manöverkritik: OOP in JS <p>Lieber JürgenB,</p> <blockquote> <p>ich muss zu meiner Schande gestehen, das ich in diesem Unterkapitel zwar das this-Problem, sonst aber nichts verstanden habe.</p> <p>Was macht</p> <pre><code class="block language-javascript"><span class="token keyword">this</span><span class="token punctuation">.</span>click <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token literal-property property">handleEvent</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span>hit<span class="token punctuation">,</span> <span class="token literal-property property">self</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>und warum wird die Methode <code>click</code> im constructor definiert?</p> </blockquote> <p>das ist mir auch sehr schleierhaft. In meinen Projekten hätte ich die Methode <code>hit</code> so gestaltet, dass sie wie jede andere Methode der Klasse auch von einem <code>this</code> ausgehen kann, welches auf die Objektinstanz zeigt. Um das zu erreichen verwende ich <code>addEventListener</code> entsprechend:</p> <pre><code class="block language-js">node<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> myObject<span class="token punctuation">.</span><span class="token function">myMethod</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <blockquote> <p>Wer bearbeitet den return-Wert von <code>hit</code>?</p> </blockquote> <p>Der landet im digitalen Nirvana. Offensichtlich ist die Überarbeitung noch in vollem Gange, sodass wir beide einfach abwarten sollten, bis eine endgültige (oder "Meilenstein"-) Fassung erreicht ist. Dann wird uns das Beispiel sicher sofort einleuchten.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794041?srt=yes#m1794041 Rolf B 2021-11-29T14:40:23Z 2021-11-29T17:33:31Z Manöverkritik: OOP in JS <p>Hallo JürgenB,</p> <blockquote> <p>Was macht <code>this.click = {handleEvent:this.hit, self:this};</code> und warum wird die Methode click im constructor definiert?</p> </blockquote> <p>Da wird keine Methode definiert. Da wird ein Objekt erzeugt, das die <a href="https://dom.spec.whatwg.org/#interface-eventtarget" rel="nofollow noopener noreferrer">EventListener-Schnittstelle</a> implementiert. Das ist Technik von anno Tobak, wie ich <a href="https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1793949#m1793949" rel="noopener noreferrer">hier</a> schon schrub und die Relevanz befragte. Warum "Methoden für Events" in dem Kapitel stehen, ist ohnehin fragwürdig, diese Diskussion gehört generell zu Methoden und <code>this</code>.</p> <p>Einerseits habe ich das [hier](und warum wird die Methode click im constructor definiert?) angerissen, das kann man ggf. noch vertiefen, und andererseits kann man das im Zusammenhang mit addEventListener nochmal ausführen.</p> <p>Dieses Objekt kann dann von einem Nutzer des Objekts verwendet werden, um ein click-Event von diesem Objekt behandeln zu lassen. Was ich in der gezeigten Form architektonisch missbillige und im oben verlinkten Beitrag ebenfalls schreibte.</p> <p>Im übrigen verhält sich der Ablauf <strong>fast</strong> genauso, als ob man eine Funktion als Event Listener verwenden würde, d.h. was mit dem Rückgabewert gemacht wird, steht nicht in der Spec. Aber traditionell, aus Zeiten vor DOM Level 2, wird return false wie event.preventDefault() behandelt. Meine ich...</p> <p>Es ist <strong>fast</strong> genauso, weil das <code>this</code> unterschiedlich ist. Ein Funktions-Eventlistener bekommt event.currentTarget als this und ein Objekt-Eventlistener bekommt das Objekt als this.</p> <p>Quelle: <a href="https://dom.spec.whatwg.org/#dispatching-events" rel="nofollow noopener noreferrer">DOM Spec</a>, inner invoke Schritt 10, und dann <a href="https://webidl.spec.whatwg.org/#call-a-user-objects-operation" rel="nofollow noopener noreferrer">WebIDL Spec</a>, Schritt 9 und 10.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794036?srt=yes#m1794036 JürgenB https://www.j-berkemeier.de 2021-11-29T14:17:10Z 2021-11-29T14:20:58Z Manöverkritik: OOP in JS <p>Hallo Felix,</p> <p>ich beschäftige mich gerade mit Pointerevents, und da mit <a href="http://test.berkemeier.eu/selfwiki/Pointer-Events/MultiPointer.html" rel="nofollow noopener noreferrer">vielen Pointern</a>. Um mit den diversen Eventhandlern und dem Eventcache nicht zu viele globale Objekte zu haben, habe ich alles in einer Klasse gebündelt. Das this-Problem habe ich erst mal mit der Pfeilfunktion gelöst.</p> <p>Meiner Meinung nach gehören in dieses Tutorial aber auch noch Setter und Getter.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794037?srt=yes#m1794037 Matthias Scharwies mscharwies@selfhtml.org 2021-11-29T14:23:11Z 2021-11-29T14:23:11Z Manöverkritik: OOP in JS <p>Servus!</p> <blockquote> <p>Hallo Felix,</p> <p>ich beschäftige mich gerade mit Pointerevents, und da mit <a href="http://test.berkemeier.eu/selfwiki/Pointer-Events/MultiPointer.html" rel="nofollow noopener noreferrer">vielen Pointern</a>. Um mit den diversen Eventhandlern und dem Eventcache nicht zu viele globale Objekte zu haben, habe ich alles in einer Klasse gebündelt. Das this-Problem habe ich erst mal mit der Pfeilfunktion gelöst.</p> <p>Meiner Meinung nach gehören in dieses Tutorial aber auch noch Setter und Getter.</p> </blockquote> <p>Ja, <a href="/users/6547" class="mention registered-user" rel="noopener noreferrer">@Rolf B</a> hat(te) die schon in seinem Entwurf drin:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/tempObjekteEigenschaften#Eigenschaften_mit_Getter_und_Setter" rel="nofollow noopener noreferrer">Benutzer:Rolf_b/tempObjekteEigenschaften#Eigenschaften_mit_Getter_und_Setter</a></li> </ul> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794077?srt=yes#m1794077 JürgenB https://www.j-berkemeier.de 2021-11-30T07:28:04Z 2021-11-30T07:28:04Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo Rolf,</p> <p>ich habe mal etwas recherchiert und diese Lösung gefällt mir am besten:</p> <pre><code class="block language-javascript"><span class="token keyword">class</span> <span class="token class-name">Pointerevents</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">pointertarget</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> pointertarget<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"pointerdown"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>down <span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token function-variable function">down</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handledown</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">handledown</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> id <span class="token operator">=</span> event<span class="token punctuation">.</span>pointerId<span class="token punctuation">;</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>pointereventcache<span class="token punctuation">[</span>id<span class="token punctuation">]</span> <span class="token operator">=</span> event<span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token comment">// down</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token keyword">new</span> <span class="token class-name">Pointerevents</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Bei dieser Variante können die Eventhandler auch wieder entfernt werden.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794080?srt=yes#m1794080 Felix Riesterer https://felix-riesterer.de 2021-11-30T08:35:07Z 2021-11-30T08:37:19Z Manöverkritik: OOP in JS - Eventhandler <p>Lieber JürgenB,</p> <blockquote> <pre><code class="block language-js">pointertarget<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"pointerdown"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>down <span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token function-variable function">down</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handledown</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">handledown</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>da bin ich mir nicht sicher, ob die "lokale Funktion" (oder "nur" eine Closure?) namens <code>down</code> in dieser Klassensyntax nicht einen Fehler wirft. Meiner Erinnerung nach ist innerhalb der Klassensyntax ein implizites "use strict" enthalten, welches vor <code>down</code> ein <em>let|const|var</em> erfordert.</p> <p>Warum nicht gleich so?</p> <pre><code class="block language-js">pointertarget<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">"pointerdown"</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handledown</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794084?srt=yes#m1794084 JürgenB https://www.j-berkemeier.de 2021-11-30T09:12:23Z 2021-11-30T09:22:51Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo Felix,</p> <blockquote> <p>Lieber JürgenB,</p> <blockquote> <pre><code class="block language-js">pointertarget<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"pointerdown"</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>down <span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token function-variable function">down</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handledown</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">handledown</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>da bin ich mir nicht sicher, ob die "lokale Funktion" (oder "nur" eine Closure?) namens <code>down</code> in dieser Klassensyntax nicht einen Fehler wirft. Meiner Erinnerung nach ist innerhalb der Klassensyntax ein implizites "use strict" enthalten, welches vor <code>down</code> ein <em>let|const|var</em> erfordert.</p> </blockquote> <p>das ist so <a href="http://test.berkemeier.eu/selfwiki/Pointer-Events/MultiPointer.html" rel="nofollow noopener noreferrer">im Einsatz</a>. Ein <em>let|const|var</em> vor dem down würde einen Fehler werfen. Variablen dürfen in Klassen nur innerhalb von Methoden deklariert werden.</p> <blockquote> <p>Warum nicht gleich so?</p> <pre><code class="block language-js">pointertarget<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">"pointerdown"</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">handledown</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>so kann man den Eventhandler nicht entfernen. Und ob der Handler innerhalb der Klasse oder außerhalb registriert wird, hängt von der Anwendung ab bzw. ist Geschmacksache.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794085?srt=yes#m1794085 Rolf B 2021-11-30T09:17:01Z 2021-11-30T09:17:01Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo Felix,</p> <p>nein, das funktioniert. Das ist die korrekte Syntax zum Definieren von Instanzproperties. Mit static davor wäre es ein Klassenproperty.</p> <p>Die Syntax ist allerdings neu. Brandneu. Kangax listet es als ES2022 Feature, das seit Ende 2020 ziemlich breit unterstützt wird, mit Nachzügler Firefox (ab v90).</p> <p>Man kann das also mittlerweile empfehlen.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794086?srt=yes#m1794086 Rolf B 2021-11-30T09:19:26Z 2021-11-30T09:19:26Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo JürgenB,</p> <blockquote> <p>Und ob der Handler innerhalb der Klasse oder außerhalb gegistriert wird, hängt von der Anwendung ab bzw. ist Geschmacksache.</p> </blockquote> <p>Ob nun re- oder gegistriert, Geschmackssache sollte das nur ausnahmsweise sein. Die SOLID Prinzipien dürften in den meisten Fällen klare Richtlinien liefern, wo eine Eventregistrierung hingehört und wo nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794087?srt=yes#m1794087 JürgenB https://www.j-berkemeier.de 2021-11-30T09:20:34Z 2021-11-30T09:20:34Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo Rolf,</p> <blockquote> <p>Die Syntax ist allerdings neu. Brandneu. Kangax listet es als ES2022 Feature, das seit Ende 2020 ziemlich breit unterstützt wird, mit Nachzügler Firefox (ab v90).</p> </blockquote> <p>der 78.10.0.esr auf meinem Dienstrechner unterstützt es auch schon.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794088?srt=yes#m1794088 JürgenB https://www.j-berkemeier.de 2021-11-30T09:24:28Z 2021-11-30T09:24:28Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo Rolf,</p> <blockquote> <p>Ob nun re- oder gegistriert,</p> </blockquote> <p>grrrrr. Hab das mal korrigiert.</p> <blockquote> <p>Geschmackssache sollte das nur ausnahmsweise sein. Die SOLID Prinzipien dürften in den meisten Fällen klare Richtlinien liefern, wo eine Eventregistrierung hingehört und wo nicht.</p> </blockquote> <p>OK</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2021/nov/24/manoverkritik-oop-in-js/1794090?srt=yes#m1794090 Rolf B 2021-11-30T09:37:27Z 2021-11-30T09:37:27Z Manöverkritik: OOP in JS - Eventhandler <p>Hallo JürgenB,</p> <blockquote> <p>78.10.0.esr</p> </blockquote> <p>stimmt, habe nicht gesehen dass Kangax die FF vor 90 als "partiell" auflistet und die Partialität sich darauf bezieht, dass nur die private instance properties fehlen. FF78 ist laut en-Wikipedia von Mitte '20, also on par mit den anderen Browsern.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>