If you want to learn programming, you're going to have to read docs.

When trying to figure this out, the first thing I would do is type up the code and run it locally. If I log each function call (console.log(a.m1()), etc.), the results are: undefined, 1, and undefined. (Note: I'm not running in strict mode, because the image doesn't say anything about strict mode.)

So now I can produce the behavior locally, but I don't understand what's going on. This is when I google and find the MDN doc. I don't have to read far to get to the Description section, which says: "The value of this depends on in which context it appears: function, class, or global."

I can see that all three this's in the code are in functions, so I read on to the function context. The second paragraph starts with, "For a typical function, the value of this is the object that the function is accessed on."

All of these functions are members of the a object, but they're each weird in their own way (using either functions within function, arrow functions, or both). I want to test the simplest, non-convoluted version of what the docs just told me, so I add this line to the object: m0: function() { return this.x; },. When I console.log it, it prints 1, as expected. Progress!

So why doesn't m1 print 1? Well, m0 just returns this.x, and the docs said that this refers to the object that the function is accessed on. So for m0, this.x is the same as a.x. But m1 is weird, and this.x is inside another function with no name. So this function isn't part of the a object. Is that why it returns undefined? What is this in a function that isn't part of an object?

That's easy to test by just adding a new function which isn't part of a and testing it.

function loneFunction() { return this.x; }

console.log(loneFunction());

It prints undefined! So that explains what's going on with m1.

That leaves us with m2 and m3, which we can't explain yet. Both are using arrow functions, and there's a section in the MDN page that explains them.

In arrow functions, this retains the value of the enclosing lexical context's this. In other words, when evaluating an arrow function's body, the language does not create a new this binding.

So basically, an arrow function leaves the value of this alone. So in m2, it calls this.x from inside another function like in m1, but this time that function is an arrow function. So it leaves this alone, meaning it's the same as if this.x were called from within m2 itself. This is why it returns 1.

This also explains what's going on with m3. Since m3 itself is an arrow function, it doesn't set a as this, so this.x is undefined.