title: Is there a way to have lexical `this` in methods using the ES6 shorthand method notation?
body: <p>First question on SO and I hope I’m not duplicating anything; I’ve looked at <a href="https://stackoverflow.com/questions/35534818/binding-context-when-calling-es6-method-how-to-access-object-from-within-method">other</a> <a href="https://stackoverflow.com/questions/35495919/best-way-to-bind-an-es6-class-method">questions</a> and think mine is different enough to warrant asking.</p>
  
  <p>Basically, is there a way to have the <code>this</code> that’s in the method body of a method written using the shorthand notation to be either lexical or bound to a specific value?</p>
  
  <p>The motivation for this comes from wanting to use the ES6 method shorthand when I was implementing the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols" rel="nofollow noreferrer">iterator protocol</a>, in which the <code>@@iterator</code> method, when called, returns an iterator object. That iterator object has to have a <code>next()</code> method, which when called itself returns another object. It’s in this 2nd object that I want a reference to the original (in my case, <code>Graph</code>) instance.</p>
  
  <p>Note that in the below code snippet, which does <em>not</em> work as intended due to the <code>this</code> binding, <code>next()</code> is using the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions" rel="nofollow noreferrer">ES6 method definition shorthand</a>.</p>
  
  <pre><code>class Graph {
    constructor(initialNodes) {
      this.data = [...initialNodes];
    }
  
    [Symbol.iterator]() {
      let nextIndex = 0;
      // `this` binding is fine here, as expected
      return {
        // look at that beautiful shorthand
        next() {
          return nextIndex &lt; this.data.length
            // `this` binding is not fine here
            ? { done: false, value: this.data[nextIndex++] }
            : { done: true };
        }
      };
    }
  }
  </code></pre>
  
  <p>I’m aware of defining the function above the object return and then assigning that function as a property of the object being returned, but again I was wondering if a way with the method shorthand syntax was possible.</p>
  
  <p>Defining <code>next()</code> above the return object as a regular function then binding it in the object property assignment:</p>
  
  <pre><code>class Graph {
    // constructor
  
    [Symbol.iterator]() {
      let nextIndex = 0;
      // I know you can do this
      const next = function() {
        return nextIndex &lt; this.data.length
          ? { done: false, value: this.data[nextIndex++] }
          : { done: true };
      };
      return {
        next: next.bind(this)
      };
    }
  }
  </code></pre>
  
  <p>Defining <code>next()</code> above the return object as an arrow function means no need for <code>bind</code>, but still no method syntax shorthand:</p>
  
  <pre><code>class Graph {
    // constructor
  
    [Symbol.iterator]() {
      let nextIndex = 0;
      // I know you can also do this
      const next = () =&gt; {
        return nextIndex &lt; this.data.length
          ? { done: false, value: this.data[nextIndex++] }
          : { done: true };
      };
      return {
        next
      };
    }
  }
  </code></pre>
  
  <p><a href="https://stackoverflow.com/users/3231537/icepickle">Icepickle</a> brought up a good point in the comments that I could just use store the <code>this</code> context and refer to that in the shorthand method body. I’m assuming this is the closest I can get?</p>
  
  <pre><code>class Graph {
    // constructor
  
    [Symbol.iterator]() {
      let nextIndex = 0;
      const self = this;
      return {
        next() {
          return nextIndex &lt; self.data.length
            ? { done: false, value: self.data[nextIndex++] }
            : { done: true };
        }
      };
    }
  }
  </code></pre>