This values for arrow functions [duplicate]

Question

I am trying to understand arrow functions in ECMAScript 6.

This is the definition I came across while reading:

Arrow functions have implicit this binding, which means that the value of the this value inside of an arrow function is aways the same as the value of this in the scope in which the arrow function is defined!

According to the definition, I believe this for an arrow function should contain the same block level values that the arrow function was defined in.

Code:

var test = {
  id: "123123",
  k: {
    laptop: "ramen",
    testfunc: () => console.log(this)
  }
}

console.log(test.k.testfunc);

However, I am getting this result from the code

function testfunc() {
    return console.log(undefined);
}

What I thought I would get would be an output of:

{"laptop": "ramen"}

if I ran this

console.log(test.k.testfunc());

Answer 1

Let's transform into the equivalent ES5 code:

var test = {
  id: "123123",
  k: {
    laptop: "ramen",
    testfunc: function(){return console.log(this)}.bind(this)
  }
}

Remember that this depends on how you call the function. The outer this isn't inside a function, so it will default to undefined in strict mode.

Simplified scenario below:

console.log(this) // undefined

var test = {
  a: this // same `this` as above
}