title: why doesn't 'this' of an arrow function change inside an nested object literal?
body: <p>I found that 'this' keyword seems always point to <code>global</code> in using arrow function inside a nested object literal. </p>
  
  <p>According to other questions, the following snippet can be explained as an arrow function's 'this' is defined in lexical context.</p>
  
  <pre><code>var c = 100;
  var a = {c:5 , fn: () =&gt; {return this.c;} };
  console.log(a.c); //100
  </code></pre>
  
  <p>However, I cannot understand the following code (nested object literal):</p>
  
  <pre><code>var c = 100;
  
  var a = {
      c: 5,
      b: {
          c: 10,
          fn: ()=&gt; {return this.c;}
      }
  }
  
  console.log(a.b.fn());// still 100, why not 5?
  </code></pre>
  
  <p>I mean, if consider from the lexical context aspect, shouldn't the 'this' in a.b.fn point to a?</p>
  
  <p>Why, no matter how many levels the object is nested, do all of the 'this' instances point to window or global?</p>