title: really confused by "enclosing scope" of javascript es6 arrow function
body: <ul>
  <li>I did a lot research online, read many posts including MDN and so on.</li>
  <li>I understand that for traditional defined functions, &quot;this&quot; within functions is defined by objects calling/invoking them (and several different cases, object literal, new constructor, event handler, etc.).</li>
  <li>I understand that for arrow functions, &quot;this&quot; is defined lexically, by the <code>enclosing context/scope</code>, not by objects invoking them (though we can use a traditionally defined function (say, A) to wrap arrow functions (say, B) and thus pass the object reference to A first, and then to B)</li>
  </ul>
  <p>Here come the questions:</p>
  <ol>
  <li><p>what exactly is an <code>enclosing context</code>? This is further convoluted since ES6 allows <code>{}</code> to be a block/scope/context. Are <code>{}</code> as delimiters good enough to define an &quot;enclosing context&quot; or it has to be within a function scope.</p>
  </li>
  <li><p>One specific example:</p>
  <pre class="lang-js prettyprint-override"><code> let EventEmitter = require('events').EventEmitter;
   class Person extends EventEmitter {
     constructor(name) {
       super();
       this.name = name;
     }
   }
   let mary = new Person('mary');
   mary.on('speak', (said) =&gt; {
     console.log(`${this.name}: ${said}`);
   });
   mary.emit('speak', 'you may delay, but time will not');
  </code></pre>
  </li>
  </ol>
  <p>It simply setups a custom event and adds a callback function when the custom event is triggered. Why the arrow function here doesn't work?</p>
  <p>&quot;mary&quot; is the object that calls the &quot;on&quot; function, which should set &quot;this&quot; within &quot;on&quot; to be &quot;mary&quot;. The most important thing is, the arrow function is defined in &quot;on&quot; function in its parameter position (lexically enough, right?), why the arrow function can't get &quot;this&quot; value from its &quot;enclosing context&quot;, that is, the &quot;on&quot; function here???</p>
  <ol start="3">
  <li><p>the same example, with conventional function definition:</p>
  <pre class="lang-js prettyprint-override"><code> let EventEmitter = require('events').EventEmitter;
   class Person extends EventEmitter {
     constructor(name) {
       super();
       this.name = name;
     }
   }
   let mary = new Person('mary');
   mary.on('speak', function(s) {
     console.log(this);
   });
   mary.emit('speak', 'you may delay, but time will not');
  </code></pre>
  </li>
  </ol>
  <p>Now it works. I understand that given the old way of function definition, console.log(this) can now be dynamically bound to the object calling it. But wait, &quot;mary&quot; is the object and &quot;on&quot; is the immediate function being called. Shouldn't &quot;on&quot; form a closure for the anonymous function within it? And I remember &quot;this&quot; within the nested function cannot access &quot;this&quot; of its closure (the enclosing context, again, huh) and thus should not get the &quot;mary&quot; refernce. Why it works here?</p>
  <ol start="4">
  <li><p>When we talk about something (say, A) within a function, does it mean A have to be in the <code>{}</code> of the function, or A could be in the parameter/argument area as well? That is, <code>function(){A}</code> vs. <code>function(A){}</code>.</p>
  </li>
  <li><p>similarly, if an arrow function is passed as a parameter like <code>function(()=&gt;()) {}</code>, does the outer function considered its enclosing scope? Or the enclosing scope in this case would be the outer of outer function?</p>
  </li>
  </ol>
  <p>The above might sound very stupid. Thanks a lot for your help.</p>