http://forge.typo3.org/http://forge.typo3.org/themes/typo3_forge/favicon/favicon.png?17058661692019-02-21T08:55:34ZTYPO3 ForgeTYPO3 Core - Task #87758: Evaluate function syntax style of TypeScript class functionshttp://forge.typo3.org/issues/87758?journal_id=3953032019-02-21T08:55:34ZFrank Näglerfrank.naegler@typo3.org
<ul><li><strong>Description</strong> updated (<a title="View differences" href="/journals/395303/diff?detail_id=330870">diff</a>)</li></ul> TYPO3 Core - Task #87758: Evaluate function syntax style of TypeScript class functionshttp://forge.typo3.org/issues/87758?journal_id=3953052019-02-21T09:10:47ZAndreas Kienast
<ul></ul><p>In general, we should use variant 2, <strong>unless</strong> we want to use a method as a event callback, then variant 1 is necessary. The reason is, that each variant has a different binding of <code>this</code>.</p>
<a name="Variant-1"></a>
<h2 >Variant 1<a href="#Variant-1" class="wiki-anchor">¶</a></h2>
<p><code>this</code> is bound to the class instance. The event target is still accessible via <code>e.target</code> or <code>e.currentTarget</code>, where <code>e</code> is the <code>Event</code> object being passed to the callback.</p>
<p>Example:</p>
<pre>
class Foo {
constructor() {
$(document).on('click', 'a', this.blockAll);
}
private blockAll = (e: JQueryEventObject): void => {
// this instanceof Foo
e.target.preventDefault();
}
</pre>
<a name="Variant-2"></a>
<h2 >Variant 2<a href="#Variant-2" class="wiki-anchor">¶</a></h2>
<p><code>this</code> is either bound to the class instance or the event delegate. In case of an event delegate, accessing <code>this</code> in class context isn't possible anymore.</p> TYPO3 Core - Task #87758: Evaluate function syntax style of TypeScript class functionshttp://forge.typo3.org/issues/87758?journal_id=3953072019-02-21T09:28:55ZMarkus Kleinmarkus.klein@typo3.org
<ul></ul><p>I would refrain from using arrow functions (var 2) as first citizens in a class.</p>
<p>If you need a method in an event handler simply introduce a local arrow function to avoid the <code>this</code> binding.</p>
<pre>
class Foo {
constructor() {
$(document).on('click', 'a', () => this.blockAll());
}
private blockAll(e: JQueryEventObject): void {
// this instanceof Foo
e.target.preventDefault();
}
</pre> TYPO3 Core - Task #87758: Evaluate function syntax style of TypeScript class functionshttp://forge.typo3.org/issues/87758?journal_id=3954412019-02-25T10:04:20ZMarkus Pirchertechnik@idealit.com
<ul></ul><p>Markus Klein wrote:</p>
<blockquote>
<p>I would refrain from using arrow functions (var 2) as first citizens in a class.</p>
<p>If you need a method in an event handler simply introduce a local arrow function to avoid the <code>this</code> binding.</p>
<p>[...]</p>
</blockquote>
<p>You can also manual bind:<br /><pre><code class="javascript syntaxhl" data-language="javascript"><span class="kd">class</span> <span class="nc">Foo</span> <span class="p">{</span>
<span class="nf">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="nf">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nf">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">a</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">blockAll</span><span class="p">.</span><span class="nf">bind</span><span class="p">(</span><span class="k">this</span><span class="p">));</span>
<span class="p">}</span>
<span class="kr">private</span> <span class="nf">blockAll</span><span class="p">(</span><span class="nx">e</span><span class="p">:</span> <span class="nx">JQueryEventObject</span><span class="p">):</span> <span class="k">void</span> <span class="p">{</span>
<span class="c1">// this instanceof Foo</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span>
<span class="p">}</span>
</code></pre></p> TYPO3 Core - Task #87758: Evaluate function syntax style of TypeScript class functionshttp://forge.typo3.org/issues/87758?journal_id=4380762021-01-06T08:22:13ZAndreas Kienast
<ul><li><strong>Status</strong> changed from <i>Accepted</i> to <i>Closed</i></li></ul><p>No progress here for almost two months. I'll close this issue now. If you think this decision is wrong, feel free to ping me to re-open the ticket.</p>