How to call a parent method from child class in javascript

Question

I ve spent the last couple of hours trying to find a solution to my problem but it seems to be hopeless   Basically I need to know how to call a parent method from a child class  All the stuff that I ve tried so far ends up in either not working or over-writing the parent method   I am using the following code to set up OOP in javascript      SET UP OOP    surrogate constructor  empty function  function surrogateCtor       function extend base  sub           copy the prototype from the base to setup inheritance     surrogateCtor prototype   base prototype      sub prototype   new surrogateCtor        sub prototype constructor   sub        parent class function ParentObject name        this name   name       parent s methods ParentObject prototype         myMethod  function arg            this name   arg              child function ChildObject name           call the parent s constructor     ParentObject call this  name       this myMethod   function arg               HOW DO I CALL THE PARENT METHOD HERE             do stuff             setup the prototype chain extend ParentObject  ChildObject     I need to call the parent s method first and then add some more stuff to it in the child class   In most OOP languages that would be as simple as calling parent myMethod   But I really cant grasp how its done in javascript   Any help is much appreciated  thank you

User · Answer

ES6 style allows you to use new features, such as super keyword. super keyword it's all about parent class context, when you are using ES6 classes syntax. As a very simple example, checkout:

class Foo {
    static classMethod() {
        return 'hello';
    }
}

class Bar extends Foo {
    static classMethod() {
        return super.classMethod() + ', too';
    }
}
Bar.classMethod(); // 'hello, too'

Also, you can use super to call parent constructor:

class Foo {}

class Bar extends Foo {
    constructor(num) {
        let tmp = num * 2; // OK
        this.num = num; // ReferenceError
        super();
        this.num = num; // OK
    }
}

And of course you can use it to access parent class properties super.prop. So, use ES6 and be happy.

User · Answer

Here s a nice way for child objects to have access to parent properties and methods using JavaScript s prototype chain  and it s compatible with Internet Explorer  JavaScript searches the prototype chain for methods and we want the child   s prototype chain to looks like this   Child instance -  Child   s prototype  with Child methods  -  Parent   s prototype  with Parent methods  -  Object prototype -  null  The child methods can also call shadowed parent methods  as shown at the three asterisks     below   Here   s how    x000D   x000D    Parent constructor x000D  function ParentConstructor firstName   x000D        add parent properties  x000D      this parentProperty   firstName  x000D    x000D   x000D    add 2 Parent methods  x000D  ParentConstructor prototype parentMethod   function argument   x000D      console log  x000D               Parent says  argument     argument   x000D                 parentProperty     this parentProperty   x000D                 childProperty     this childProperty x000D         x000D     x000D   x000D  ParentConstructor prototype commonMethod   function argument   x000D      console log  Hello from Parent  argument     argument   x000D     x000D   x000D    Child constructor     x000D  function ChildConstructor firstName  lastName   x000D        first add parent s properties x000D      ParentConstructor call this  firstName   x000D   x000D        now add child s properties  x000D      this childProperty   lastName  x000D    x000D   x000D    insert Parent s methods into Child s prototype chain x000D  var rCopyParentProto   Object create ParentConstructor prototype   x000D  rCopyParentProto constructor   ChildConstructor  x000D  ChildConstructor prototype   rCopyParentProto  x000D   x000D    add 2 Child methods  x000D  ChildConstructor prototype childMethod   function argument   x000D      console log  x000D               Child says  argument     argument   x000D                 parentProperty     this parentProperty   x000D                 childProperty     this childProperty x000D         x000D     x000D   x000D  ChildConstructor prototype commonMethod   function argument   x000D      console log  Hello from Child  argument     argument   x000D   x000D             call Parent s version of common method x000D      ParentConstructor prototype commonMethod argument   x000D     x000D   x000D    create an instance of Child x000D  var child 1   new ChildConstructor  Albert    Einstein    x000D   x000D    call Child method x000D  child 1 childMethod  do child method    x000D   x000D    call Parent method x000D  child 1 parentMethod  do parent method    x000D   x000D    call common method x000D  child 1 commonMethod  do common method    x000D   x000D   x000D

User · Answer

Here s how its done  ParentClass prototype myMethod     Or if you want to call it in the context of the current instance  you can do  ParentClass prototype myMethod call this   Same goes for calling a parent method from child class with arguments  ParentClass prototype myMethod call this  arg1  arg2        Hint  use apply   instead of call   to pass arguments as an array

User · Answer

In case of multiple inheritance level  this function can be used as a super   method in other languages  Here is a demo fiddle  with some tests  you can use it like this  inside your method use   call base this   method name   arguments    It make use of quite recent ES functions  an compatibility with older browsers is not guarantee  Tested in IE11  FF29  CH35          Call super method of the given object and method     This function create a temporary variable called   call base reference      to inspect whole inheritance linage  It will be deleted at the end of inspection        Usage   Inside your method use call base this   method name   arguments          param  object  object The owner object of the method and inheritance linage     param  string  method The name of the super method to find      param  array  args The calls arguments  basically use the  arguments  special variable      returns     The data returned from the super method      function call base object  method  args           We get base object  first time it will be passed object         but in case of multiple inheritance  it will be instance of parent objects      var base   object hasOwnProperty   call base reference     object  call base reference   object         We get matching method  from current object         this is a reference to define super method              object current method   base method          Temp object wo receive method definition              descriptor   null         We define super function after founding current position              is super   false         Contain output data              output   null      while  base     undefined               Get method info         descriptor   Object getOwnPropertyDescriptor base  method           if  descriptor     undefined                   We search for current object method to define inherited part of chain              if  descriptor value     object current method                       Further loops will be considered as inherited function                  is super   true                               We already have found current object method              else if  is super     true                       We need to pass original object to apply   as first argument                     this allow to keep original instance definition along all method                    inheritance  But we also need to save reference to  base  who                    contain parent class  it will be used into this function startup                    to begin at the right chain position                  object  call base reference   base                     Apply super method                  output   descriptor value apply object  args                      Property have been used into super function if another                    call base   is launched  Reference is not useful anymore                  delete object  call base reference                     Job is done                  return output                                     Iterate to the next parent inherited          base   Object getPrototypeOf base

User · Answer

How about something based on Douglas Crockford idea       function Shape          Shape prototype name    Shape        Shape prototype toString   function            return this constructor parent               this constructor parent toString           this name               this name               function TwoDShape          var F   function           F prototype   Shape prototype       TwoDShape prototype   new F         TwoDShape prototype constructor   TwoDShape       TwoDShape parent   Shape prototype       TwoDShape prototype name    2D Shape         var my   new TwoDShape         console log my toString         gt  Shape 2D Shape

User · Answer

There is a much easier and more compact solution for multilevel prototype lookup  but it requires Proxy support  Usage  SUPER  lt instance gt    lt method gt   lt args gt    for example  assuming two classes A and B extends A with method m  SUPER new B  m     function SUPER instance        return new Proxy instance            get target  prop                return Object getPrototypeOf Object getPrototypeOf target   prop  bind target

User · Answer

While you can call the parent method by the prototype of the parent  you will need to pass the current child instance for using call  apply  or bind method  The bind method will create a new function so I doesn t recommend that if you care for performance except it only called once  As an alternative you can replace the child method and put the parent method on the instance while calling the original child method   x000D   x000D  function proxy context  parent     var proto   parent prototype    var list   Object getOwnPropertyNames proto        for var i 0  i  lt  list length  i         var key   list i           Create only when child have similar method name     if context key      proto key          let currentMethod   context key         let parentMethod   proto key                context key    function            context super   parentMethod          return currentMethod apply context  arguments                                     The usage would be like this             class Parent     first    Home      constructor        console log  Parent created           add arg       return this first      Parent   arg         class Child extends Parent    constructor b       super        proxy this  Parent       console log  Child created              Comment this to call method from parent only   add arg       return super add arg       Child   arg         var family   new Child    console log family add  B     x000D   x000D   x000D

User · Answer

Well in order to do this  you are not limited with the Class abstraction of ES6  Accessing the parent constructor s prototype methods is possible through the   proto   property  I am pretty sure there will be fellow JS coders to complain that it s depreciated  which is depreciated but at the same time discovered that it is actually an essential tool for sub-classing needs  especially for the Array sub-classing needs though   So while the   proto   property is still available in all major JS engines that i know  ES6 introduced the Object getPrototypeOf   functionality on top of it  The super   tool in the Class abstraction is a syntactical sugar of this   So in case you don t have access to the parent constructor s name and don t want to use the Class abstraction you may still do as follows   function ChildObject name           call the parent s constructor     ParentObject call this  name       this myMethod   function arg          this   proto     proto   myMethod call this arg       Object getPrototypeOf Object getPrototypeOf this   myMethod call this arg

[javascript] How to call a parent method from child class in javascript?

Examples related to javascript

Examples related to oop

Examples related to methods

Examples related to parent