title: Arrow Function in Object Literal
body: <p>I'm trying to figure out why an arrow function in an object literal is called with <code>window</code> as <code>this</code>. Can someone give me some insight?</p>
  
  <pre><code>var arrowObject = {
    name: 'arrowObject',
    printName: () =&gt; {
      console.log(this);
    }
  };
  
  // Prints: Window {external: Object, chrome: Object ...}
  arrowObject.printName();
  </code></pre>
  
  <p>And an object that works as expected:</p>
  
  <pre><code>var functionObject = {
    name: 'functionObject',
    printName: function() {
      console.log(this);
    }
  };
  
  // Prints: Object {name: "functionObject"}
  functionObject.printName();
  </code></pre>
  
  <p>According to <a href="https://babeljs.io/repl/#?evaluate=true&amp;presets=es2015&amp;code=let%20arrowObject%20%3D%20%7B%0A%20%20name%3A%20&#39;arrowObject&#39;%2C%0A%20%20printName%3A%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log(this)%3B%0A%20%20%7D%0A%7D%3B%0A%0AarrowObject.printName()%3B%0A%0Alet%20functionObject%20%3D%20%7B%0A%20%20name%3A%20&#39;functionObject&#39;%2C%0A%20%20printName%3A%20function()%20%7B%0A%20%20%20%20console.log(this)%3B%0A%20%20%7D%0A%7D%3B%0A%0AfunctionObject.printName()%3B&amp;experimental=true&amp;loose=false&amp;spec=false" rel="noreferrer">Babel REPL</a>, they're transpiled to</p>
  
  <pre><code>var arrowObject = {
    name: 'arrowObject',
    printName: function printName() {
      console.log(undefined);
    }
  };
  </code></pre>
  
  <p>And</p>
  
  <pre><code>var functionObject = {
    name: 'functionObject',
    printName: function printName() {
      console.log(this);
    }
  };
  </code></pre>
  
  <p>Why isn't <code>arrowObject.printName();</code> called with <code>arrowObject</code> as <code>this</code>?</p>
  
  <p>Console logs are from <a href="https://jsfiddle.net/dsandmark/kx8m6e07/" rel="noreferrer">Fiddle</a> (where <code>use strict;</code> isn't used).</p>