<p dir="auto">Hello <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/sebmck/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/sebmck">@sebmck</a> I use babel and arrow function like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let x = () =&gt; {
  console.log(this);
};

x();"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-en">x</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-en">x</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">But in <code class="notranslate">console.log</code> output <code class="notranslate">undefined</code>. This is very important problem in my project.</p>
<p dir="auto">First I tried</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';
console.log({[this.document.name]: 'me'});"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">document</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">]</span>: <span class="pl-s">'me'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Which in the computed property name context of <code class="notranslate">this</code> was not global.</p>
<p dir="auto">Then I tried</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.name = 'name'

console.log({[this.name]: 'me'})"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s">'name'</span>

<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">[</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">]</span>: <span class="pl-s">'me'</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">and noticed the global <code class="notranslate">this</code> is undefined:</p>
<blockquote>
<p dir="auto">Cannot set property 'name' of undefined</p>
</blockquote>