<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var A = {
    test: () =&gt; {this}
};"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">A</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    <span class="pl-en">test</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">this</span><span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">why is <strong>this</strong> in code above translated to <strong>undefined</strong> instead of pointing to object itself?</p>
<p dir="auto">When using the npm library <a href="https://github.com/neumino/thinky">thinky</a>, I have the following snippet of code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="User.pre('save', (next) =&gt; {

    console.log(&quot;pre save event\n&quot;, this)
    next()

})"><pre class="notranslate"><code class="notranslate">User.pre('save', (next) =&gt; {

    console.log("pre save event\n", this)
    next()

})
</code></pre></div>
<p dir="auto">Where <code class="notranslate">this</code> will be undefined. However, if I change the arrow function to an ES5 function:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="User.pre('save', function(next) {

    console.log(&quot;pre save event\n&quot;, this)
    next()

})"><pre class="notranslate"><code class="notranslate">User.pre('save', function(next) {

    console.log("pre save event\n", this)
    next()

})
</code></pre></div>
<p dir="auto"><code class="notranslate">this</code> is defined as expected. What would cause <code class="notranslate">this</code> to be undefined with an arrow function?</p>