ecmascript 6 - Javascript Child Class method not overriding Parent Class Method - Stack Overflow

admin管理员组

文章数量:1415111

I am trying to override one method from the parent class, but there are some issues.

Below is the code snippet of my scenario which I am trying.

class Parent {
add = () => {
      console.log('Parent method');
}
}
class Child extends Parent {
add () {
console.log('Child Method');
 }
}
// Creating an instance
const child = new Child();
child.add();

It is calling the Parent method add as that is arrow function, Can someone explain why this is happening. If I make the parent function a simple javascript method then child is able to override.

Additonal Details :

1. I don't have access to Parent as it is part of library.
2. I can't make my child class method as instance properties (arrow function) , the reason for being that there are further specification written for child (child of child) and If we use arrow functions we will not be able to call the super.
3. Child function name can't be renamed.

I am trying to override one method from the parent class, but there are some issues.

Below is the code snippet of my scenario which I am trying.

class Parent {
add = () => {
      console.log('Parent method');
}
}
class Child extends Parent {
add () {
console.log('Child Method');
 }
}
// Creating an instance
const child = new Child();
child.add();

It is calling the Parent method add as that is arrow function, Can someone explain why this is happening. If I make the parent function a simple javascript method then child is able to override.

Additonal Details :

1. I don't have access to Parent as it is part of library.
2. I can't make my child class method as instance properties (arrow function) , the reason for being that there are further specification written for child (child of child) and If we use arrow functions we will not be able to call the super.
3. Child function name can't be renamed.

• javascript
• ecmascript-6
• ecmascript-5

Share Improve this question Follow edited Jul 18, 2018 at 11:41 Mohit Sharma asked Jul 18, 2018 at 11:14 Mohit SharmaMohit Sharma 38033 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is one of few reasons why arrow methods aren't convenient. They limit the ways in which a class can be extended and tested.

Class fields (which arrow methods are) are syntactic sugar for constructor code:

class Parent {
  constructor() {
    this.add = () => {...};
  }
}

Only another arrow method can override parent arrow method, because they are defined in class constructor, not on class prototype:

class Child extends Parent {
  add = () => {
    /* no super.add here because add is not prototype method */
  }
}

If super.add is intended to be used, a workaround is to store parent method:

class Child extends Parent {
  superAdd = this.add;
  add = () => {
    this.superAdd();
  }
}

Notice that since this is syntactic sugar for constructor code, the order in which superAdd and add are defined matters.

The parent add is an instance property, and it overshadows the child's class method, which is part of the instance's prototype. It's a bit hacking, but you can rename and delete the class property in the constructor:

class Parent {
  add = () => {
    console.log('Parent method');
  }
}
class Child extends Parent {
  constructor() {
    super();
    this.parentAdd = this.add;
    delete this.add;
  }

  add() {
    console.log('Child Method');
    this.parentAdd(); // if you need call the parent's method
  }
}

const child = new Child();
child.add();

本文标签： ecmascript 6Javascript Child Class method not overriding Parent Class MethodStack Overflow