class method doesn't override class field

Question

Very weird behaviour. Why does the following log "A.fn" only, the next line "B.fn" doesn't even run? What exactly is happening in this following code?

I'm using Babel stage-2, which is used in most React projects.

class A {
    fn = () => {
        console.log("A.fn");
    }
}

class B extends A {
    fn() {
        super.fn();
        console.log('B.fn')
    }
}

new B().fn(); // why this logs "A.fn" only, while "B.fn" isn't logged?

it's perfectly valid es6 and runs well with babel transpiler — Maria, Jun 11 '18 at 19:50
there is no babel tag and that's exactly what the comment above was trying to get to. For pure ES6, it would not be valid. — ASDFGerte, Jun 11 '18 at 19:52
@JohnLee I think Phix means it requires at least stage-2 for the instance props. It isn't core ES6. — Dave Newton, Jun 11 '18 at 19:52
`fn` in `A` is an instance method while `fn` in `B` is a method on the prototype. The behavior then follows from how `extends` works together with name resolution order. — ASDFGerte, Jun 11 '18 at 19:56
The prototype isn't checked because `fn` exists on the object itself already (the `fn` from `A`). — ASDFGerte, Jun 11 '18 at 19:59
Isn't it because of arrow function (`fn = () = {...}`) in `A` class? — The Reason, Jun 11 '18 at 20:02
That's why you should not use class-field arrow functions as class methods. — Bergi, Jun 11 '18 at 20:03
@TheReason: It would be the same if it isn't an arrow function. — Felix Kling, Jun 11 '18 at 20:03

Felix Kling · Answer 1 · 2018-06-11T20:08:10.887

2

Can I know exactly what's happening in this following code?

Public class fields is equivalent to doing:

class A {
  constructor() {
    this.fn = () =>  console.log("A.fn");
  }
}

I.e. fn is defined on the instance itself whereas when using the method syntax, the method is defined on the prototype (B.prototype.fn). Lets log an instance of B:

The first fn is the one created in the constructor, the second one is the defined as B's class methods. Because fn is defined on the instance, i.e. is "higher" in the prototype chain, it shadows B.prototype.fn, meaning that B.prototype.fn is never called.

That's just how the prototype chain works!

Here is a simpler example with the same problem:

const proto = {fn() { console.log('proto'); }};
const obj = Object.create(proto);
obj.fn = () => console.log('instance');
obj.fn();

edited Jun 11 '18 at 20:08

answered Jun 11 '18 at 19:59

Felix Kling

795,719
175
1,089
1,143

1

…and what is even worse about class fields: Using `fn = () => {` in the `class B` doesn't fix this. – Bergi Jun 11 '18 at 20:05
`{fn() { console.log('proto'); }};` is not correct syntax..? – Maria Jun 11 '18 at 21:05
@JohnLee: Yes it is. Try to run the code snippet. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions – Felix Kling Jun 12 '18 at 00:21

class method doesn't override class field

1 Answers1

Linked

Related