title: Why Chrome can not(or CAN) find context in a Arrow function of ES6
body: <p><strong>[UPDATE]: It turns out there are tow reason for my question:</strong></p>
  
  <p>For <strong>CAN NOT</strong>: It is my lack of knowledge about how arrow function works, it just locks the surrounding context everywhere it defined. And the global is <code>undefined</code> in strict mode.</p>
  
  <p>For <strong>CAN</strong>: It could be a bug of old version Chrome Dev Tool.</p>
  
  <p>Please refer to comment to find out what are the <strong>CAN</strong> and <strong>CAN NOT</strong> here</p>
  
  <hr>
  
  <p>All:</p>
  
  <p>I am pretty new to ES6, when I try arrow function's concept of lexical context locking, I use code like:</p>
  
  <pre><code>var glb = {name: "glb" };
  glb.showname = () =&gt; {
      /******* interesting thing happens here below *******/
      console.log(this);
      this.name = "hello"
      return () =&gt; {
          console.log(this.name);
      }
  }
  const ext = {name: "ext"};
  ext.showname = glb.showname();
  ext.showname();
  </code></pre>
  
  <p>And I transpile it with: </p>
  
  <pre><code>browserify main.js  -o bundle.js -t [ babelify --presets [ es2015 ]   ] -d
  </code></pre>
  
  <p>Interesting thing is:</p>
  
  <p>When I run it without setting breaking point(either with Node or in Chrome), it always give me error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'name' of undefined</p>
  </blockquote>
  
  <p>and the console just prints out <code>undefined</code></p>
  
  <p><strong>But when I set a break point(I do it in Chrome), this time, the context can be printed out like</strong>:</p>
  
  <pre><code> Object {name: "glb"}
  </code></pre>
  
  <p><strong>Any idea why this happens?</strong></p>
  
  <p>Thanks</p>