Inheritance and polymorphism using arrow functions in JavaScript Classes

Question

Why do arrow functions take precedence over function declarations in JavaScript Classes?

Example :


class Parent {

    work = () => {
        console.log('This is work() on the Parent class');
    }
}

class Child extends Parent {

    work() {
        console.log("This is work() on the Child class ");
    }

}

const kid = new Child();

kid.work();

The parent work() method fires in this example :

"This is work() on the Parent class"

I just want to understand WHY the arrow function always takes precedence in JS Classes, especially in regards to Inheritance and Polymorphism.

This is why you should not (ab)use arrow functions in instance class fields as methods. — Bergi
– Bergi, Commented Jun 10, 2021 at 12:39

adiga · Accepted Answer · 2020-06-10 11:07:15Z

It is nothing to do with being an arrow function. It is taking precedence because it's a class field. Class fields are added as an own property of the instance while methods are added to Child.prototype.work. Even if you change it from an arrow function to a regular function, it will still execute the class field.

When you access kid.work, the order in which the property will be looked is

own properties, directly under kid object (It is found here)
Child.prototype.work
Parent.prototype.work
If still not found, it will be looked inside Object.prototype

class Parent {
  // doesn't matter if it an arrow function or not
  // prop = <something> is a class field
  work = function() {
    console.log('This is work() on the Parent class');
  }
}

class Child extends Parent {
  // this goes on Child.prototype not on the instance of Child
  work() {
    console.log("This is work() on the Child class ");
  }
}

const kid = new Child();

// true 
console.log( kid.hasOwnProperty("work") )

// true
console.log( Child.prototype.hasOwnProperty("work") )

// false 
// because work inside Parent is added to each instance
console.log( Parent.prototype.hasOwnProperty("work") )

kid.work();

// How to force the Child method
Child.prototype.work.call(kid)

Collectives™ on Stack Overflow

Inheritance and polymorphism using arrow functions in JavaScript Classes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related