Why are arrow functions as static members values not lexically scoped?

Question

class Foo {
  static v = 123;

  static bar = () => this.v;
}

console.log(Foo.bar());

I expect this code to return undefined, because arrow functions are lexically scoped, hence this must be eagerly bound to the outer scope.

Yet, it returns 123.

Why exactly does this happen?

And yep, I understand it's still stage 3, but still - why does the proposed standard behave like that? (See https://babeljs.io/docs/en/babel-plugin-transform-class-properties for another example.)

Selfconsequence

tc39.es/proposal-class-fields/… 10.a "Set the running execution context's LexicalEnvironment to classScope." so – Squinch

@YuryTarabanko please post as an answer – Selfconsequence

It looks like every "field" is actually wrapped into yet a function/method: tc39.es/proposal-class-fields/…, but I'm not 100% sure. – Mortonmortuary

@FelixKling it looks convincing but their FunctionCreate(Method, formalParameterList, Initializer, lex, true, privateScope). has PrivateScope and Strict swapped. – Selfconsequence

Apparently those methods are then executed to create the actual properties in DefineField: tc39.es/proposal-class-fields/#sec-define-field (step 5.a) – Mortonmortuary

@FelixKling yep, I altered my comment - they confused the order of 2 last arguments. From your link it is FunctionCreate(Method, formalParameterList, Initializer, lex, true, privateScope) but should be FunctionCreate(Method, formalParameterList, Initializer, lex, privateScope, true) – Selfconsequence

@zerkms: Maybe just a typo? – Mortonmortuary

Definitely a typo, sorry for shifting focus to this irrelevant thing. Otherwise as I just mentioned, your guess looks very convincing to me :-) – Selfconsequence

Somehow DefineField doesn't seem to be used for static fields though? Need to do more digging... – Mortonmortuary

Ah, wrong spec. tc39.es/proposal-static-class-features/… -> 34.a ... not easy to follow when the relevant sections are spread over multiple specs ;) – Mortonmortuary

Answer 1

tl;dr: Every class field (static or not) is internally wrapped in a method which gets invoked with the corresponding receiver (class or instance) at some point.

---

So, I'm not sure on some of those details *, but basically this happens:

For every field with an initializer (static or not), a function/method is created, with the initializer as its body. So this

static foo = () => this.v;

becomes something like this internally

function () { () => this.v }

That's in the proposal in step 28, which eventually leads to ClassFieldDefinitionEvaluation in this spec. The method is created in step 3.e.

The static fields (which are methods now) are then taken and called with the class object itself as receiver (i.e. the this value inside that intermediate method is set to the class object). This happens in step 34.a, which leads to DefineField in this spec. Finally the return value (in your case the arrow function) is used as value for the actual property.

Expressed as code, this is roughly what happens:

class Foo {}

Foo.v = function() { return 123; }.call(Foo);
Foo.bar = function() { return () => this.v; }.call(Foo);

---

*: I'm not quite clear how the intermediate method returns the value, but there is probably something that says that the last expression of the function body is returned or something.

Mortonmortuary

I have a feeling that this part of the proposal is not quite final. The function wrapping looks like a hack to me, I'd hope they polish this up before stage 4. – Darkling