Arrow Function in Object Literal
<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>