<div dir="ltr">I was asked by John to chime in, and I will repeat here what I sent to him directly via email.<br><br>Thanks for making the proposal and thinking through this problem. 
Indeed, `this` is a confusing concept for many people, and is an 
existing baggage from early JavaScript Design.<br><br><div>This having been said, it isn't clear to me what you are proposing. Your proposal is already possible in JavaScript as is, it 
is not adding a new capability to the language, it is instead 
introducing syntax as a work around that has already been extensively 
tooled. So, knowing this, how do we approach this problem? People are 
definitely struggling with this issue, so how can we do it better?<br><br>Let's play with this problem a bit. 
>From your proposal it looks like you want a 
way to clearly identify methods on a class to have access to the `this` 
that is the class instance. At the moment, as you mention, you have to 
bind it in the 
constructor. What if it was a list of "bound methods"? or a keyword at 
the beginning of the class declaration called bound.<br><br>```<br></div><div>class Xyz {<br></div><div>  boundMethods = ["counter"];<br><div>   constructor() {<br></div><div>    this.count = 0;<br></div><div>    // something<br></div><div>  } <br>  <br></div><div>  counter() {<br></div><div>    this.count++;<br></div><div>  }<br><br></div><div>  render() {<br></div><div>  // some code<br></div><div>  element.addEventListener("click", this.counter);<br></div><div>  }</div></div><div>}<br></div><div>```<br><br></div><div>Well,
 that looks a bit ugly, and I can imagine a class having a lot of these 
and it not being much better than what we had before. Plus, it isn't 
clear to a programmer what is going on here. Let's try something else<br><br></div><div>What if we had a keyword like `async`?<br><br>```<br><br></div><div>class Xyz {<br></div><div>  constructor() {<br></div><div>    this.count = 0;<br></div><div>    // something<br></div><div>  } <br>  <br></div><div>  bound counter() {<br></div><div>    this.count++;<br></div><div>  }<br><br></div><div>  render() {<br></div><div>  // some code<br></div><div>  element.addEventListener("click", this.counter);<br></div><div>  }<br></div><div>}<br></div><div><br>```<br><br></div><div>You
 get the idea. So this is another way to think about the problem. But if
 we do this, then suddenly, we are going to be adding a huge list of 
keywords to the beginning! imaging `bound async nameOfFunction()`, and also how do you know what order they should be in?. So 
maybe there is another solution? Maybe someone has tried something before.<br><br>If
 we go through the current proposals that are in flight at the TC39, 
there is a proposal that also tries to tackle this, the decorators 
proposal. Take a look at how decorators solves the same problem:
 <a href="https://github.com/tc39/proposal-decorators#decorators" target="_blank">https://github.com/tc39/proposal-decorators#decorators</a><br><br></div><div>here is how it is done there (simplified, only showing `@bound` at work):<br><br>```
<pre><span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-k">class</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-en">Counter</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-k">extends</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-e">HTMLElement</span> {
  _x <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-k">=</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">0</span>;

  @bound
  _<span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-en">clicked</span>() {
    <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">this</span>._x<span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-k">++</span>;
  }

  <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-en">constructor</span>() {
    <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">super</span>();
    <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">this</span>.<span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-smi">onClick</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-k">=</span> <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">this</span>._clicked; // this is a private method, see the proposal for more details
  }

  <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-en">connectedCallback</span>() { <span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-c1">this</span>.<span class="gmail-m_5816823267504318268gmail-m_3642968963961823816gmail-pl-en">render</span>(); }<br><br></pre><pre>  render() {<br></pre><pre>    // ... it does something, lets imagine creates an element that listens for a click<br></pre><pre>    element.addEventListener("click", this.onClick)<br></pre><pre>  }
}<br></pre><pre>```<br><br></pre>I removed some of the complexity of the original 
example, to help make it clear what is going on here in relation to what
 you were suggesting. The way it works is <code>@bound</code> makes <code>clicked</code> into an auto-bound method, replacing the explicit <code>bind</code>
 call later. You can read more about this in the proposal I linked. This
 is one way to address the issue that you bring up, without introducing a new keyword 
`self`.<br><br></div><div>It might be worth looking through some 
previous proposals to get a sense of how others have tried to tackle the
 problem. For the decorators proposal, it is really just a starting 
point -- you might find other points of reference. See if it is what you
 were 
looking for. If it doesn't fully address the case, it might point you in
 a direction that gets closer to a proposal, or it might bring up other 
interesting questions. We don't have to start with a fully formed 
solution -- collecting problems and constraints is an interesting way to
 work. <br><br></div><div>Hopefully this helps.</div></div>