JavaScript Extending Class

Question

I have a base class      function Monster       this health   100     Monster prototype growl   function       console log  Grr         That I want to extend and create another class with   function Monkey extends Monster       this bananaCount   5     Monkey prototype eatBanana     this bananaCount--    this health      Accessing variable from parent class monster   this growl       Accessing function from parent class monster     I ve done quite a bit of research and there appears to be many convoluted solutions for doing this in JavaScript  What would be the simplest and most reliable way of accomplishing this in JS

User · Answer

For traditional extending you can simply write superclass as constructor function, and then apply this constructor for your inherited class.

     function AbstractClass() {
      this.superclass_method = function(message) {
          // do something
        };
     }

     function Child() {
         AbstractClass.apply(this);
         // Now Child will have superclass_method()
     }

Example on angularjs:

http://plnkr.co/edit/eFixlsgF3nJ1LeWUJKsd?p=preview

app.service('noisyThing', 
  ['notify',function(notify){
    this._constructor = function() {
      this.scream = function(message) {
          message = message + " by " + this.get_mouth();
          notify(message); 
          console.log(message);
        };

      this.get_mouth = function(){
        return 'abstract mouth';
      }
    }
  }])
  .service('cat',
  ['noisyThing', function(noisyThing){
    noisyThing._constructor.apply(this)
    this.meow = function() {
      this.scream('meooooow');
    }
    this.get_mouth = function(){
      return 'fluffy mouth';
    }
  }])
  .service('bird',
  ['noisyThing', function(noisyThing){
    noisyThing._constructor.apply(this)
    this.twit = function() {
      this.scream('fuuuuuuck');
    }
  }])

User · Answer

the absolutely minimal  and correct  unlike many of the answers above  version is   function Monkey param     this someProperty   param    Monkey prototype   Object create Monster prototype   Monkey prototype eatBanana   function banana   banana eat       That s all  You can read here the longer explanation

User · Answer

For Autodidacts   function BaseClass toBePrivate       var morePrivates      this isNotPrivate    I know          add your stuff   var o   BaseClass prototype     add your prototype stuff o stuff is never private    whatever except getter and setter        MiddleClass extends BaseClass function MiddleClass toBePrivate       BaseClass call this          add your stuff     var morePrivates      this isNotPrivate    I know     var o   MiddleClass prototype   Object create BaseClass prototype   MiddleClass prototype constructor   MiddleClass     add your prototype stuff o stuff is never private    whatever except getter and setter         TopClass extends MiddleClass function TopClass toBePrivate       MiddleClass call this          add your stuff     var morePrivates      this isNotPrivate    I know     var o   TopClass prototype   Object create MiddleClass prototype   TopClass prototype constructor   TopClass     add your prototype stuff o stuff is never private    whatever except getter and setter        to be continued      Create  instance  with getter and setter   function doNotExtendMe toBePrivate       var morePrivates      return              add getters  setters and any stuff you want

User · Answer

If you don t like the prototype approach  because it doesn t really behave in a nice OOP-way  you could try this   var BaseClass   function          this some var    foobar                    return string             this someMethod   function             return this some var            var MyClass   new Class   extends  BaseClass    function                     param string value             this   construct   function value                this some var   value             Using lightweight library  2k minified   https   github com haroldiedema joii

User · Answer

Updated below for ES6  March 2013 and ES5  This MDN document describes extending classes well   https   developer mozilla org en-US docs JavaScript Introduction to Object-Oriented JavaScript  In particular  here is now they handle it      define the Person Class function Person       Person prototype walk   function      alert   I am walking        Person prototype sayHello   function      alert   hello           define the Student class function Student          Call the parent constructor   Person call this         inherit Person Student prototype   Object create Person prototype       correct the constructor pointer because it points to Person Student prototype constructor   Student      replace the sayHello method Student prototype sayHello   function      alert  hi  I am a student          add sayGoodBye method Student prototype sayGoodBye   function      alert  goodBye       var student1   new Student    student1 sayHello    student1 walk    student1 sayGoodBye        check inheritance alert student1 instanceof Person      true  alert student1 instanceof Student      true   Note that Object create   is unsupported in some older browsers  including IE8     If you are in the position of needing to support these  the linked MDN document suggests using a polyfill  or the following approximation   function createObject proto        function ctor           ctor prototype   proto      return new ctor        Using this like Student prototype   createObject Person prototype  is preferable to using new Person   in that it avoids calling the parent s constructor function when inheriting the prototype  and only calls the parent constructor when the inheritor s constructor is being called   May 2017 and ES6  Thankfully  the JavaScript designers have heard our pleas for help and have adopted a more suitable way of approaching this issue   MDN has another great example on ES6 class inheritance  but I ll show the exact same set of classes as above reproduced in ES6   class Person       sayHello             alert  hello               walk             alert  I am walking              class Student extends Person       sayGoodBye             alert  goodBye               sayHello             alert  hi  I am a student             var student1   new Student    student1 sayHello    student1 walk    student1 sayGoodBye        check inheritance alert student1 instanceof Person      true  alert student1 instanceof Student      true   Clean and understandable  just like we all want  Keep in mind  that while ES6 is pretty common  it s not supported everywhere

User · Answer

Summary   There are multiple ways which can solve the problem of extending a constructor function with a prototype in Javascript  Which of these methods is the  best  solution is opinion based  However  here are two frequently used methods in order to extend a constructor s function prototype   ES 2015 Classes    x000D   x000D  class Monster   x000D    constructor health    x000D      this health   health x000D      x000D     x000D    growl      x000D    console log  Grr     x000D      x000D     x000D    x000D   x000D   x000D  class Monkey extends Monster   x000D    constructor  health    x000D      super health     call super to execute the constructor function of Monster  x000D      this bananaCount   5  x000D      x000D    x000D   x000D  const monkey   new Monkey 50   x000D   x000D  console log typeof Monster   x000D  console log monkey   x000D   x000D   x000D    The above approach of using ES 2015 classes is nothing more than syntactic sugar over the prototypal inheritance pattern in javascript  Here the first log where we evaluate typeof Monster we can observe that this is function  This is because classes are just constructor functions under the hood  Nonetheless you may like this way of implementing prototypal inheritance and definitively should learn it  It is used in major frameworks such as ReactJS and Angular2    Factory function using Object create      x000D   x000D  function makeMonkey  bananaCount    x000D     x000D       here we define the prototype x000D    const Monster     x000D    health  100  x000D    growl  function     x000D    console log  Grr      x000D      x000D     x000D    const monkey   Object create Monster   x000D    monkey bananaCount   bananaCount  x000D   x000D    return monkey  x000D    x000D   x000D   x000D  const chimp   makeMonkey 30   x000D   x000D  chimp growl    x000D  console log chimp bananaCount   x000D   x000D   x000D    This method uses the Object create   method  which takes an object which will be the prototype of the newly created object it returns  Therefore we first create the prototype object in this function and then call Object create   which returns an empty object with the   proto   property set to the Monster object  After this we can initialize all the properties of the object  in this example we assign the bananacount to the newly created object

User · Answer

ES6 gives you now the opportunity to use class  amp  extends keywords     Then   your code will be     You have a base class   class Monster         constructor                 this health   100                   growl                console log  Grr                   That You want to extend and create another class with   class Monkey extends Monster           constructor                super      don t forget  super              this bananaCount   5                      eatBanana                this bananaCount--             this health      Accessing variable from parent class monster            this growl      Accessing function from parent class monster

User · Answer

Try this   Function prototype extends   function parent      this prototype   Object create parent prototype       Monkey extends Monster   function Monkey       Monster apply this  arguments      call super     Edit  I put a quick demo here http   jsbin com anekew 1 edit  Note that extends is a reserved word in JS and you may get warnings when linting your code  you can simply name it inherits  that s what I usually do   With this helper in place and using an object props as only parameter  inheritance in JS becomes a bit simpler   Function prototype inherits   function parent      this prototype   Object create parent prototype       function Monster props      this health   props health    100     Monster prototype       growl  function         return  Grrrrr           Monkey inherits Monster   function Monkey       Monster apply this  arguments      var monkey   new Monkey   health  200      console log monkey health       gt  200 console log monkey growl         gt   Grrrr

User · Answer

I can propose one variant  just have read in book  it seems the simplest   function Parent        this name    default name       function Child       this address    11 street       Child prototype   new Parent            child class inherits from Parent Child prototype constructor   Child     constructor alignment  var a   new Child      console log a name                      default name  trying to reach property of inherited class

User · Answer

This is an extension  excuse the pun  of elclanrs  solution to include detail on instance methods  as well as taking an extensible approach to that aspect of the question  I fully acknowledge that this is put together thanks to David Flanagan s  JavaScript  The Definitive Guide   partially adjusted for this context    Note that this is clearly more verbose than other solutions  but would probably benefit in the long-term   First we use David s simple  extend  function  which copies properties to a specified object   function extend o p        for  var prop in p            o prop    p prop             return o      Then we implement his Subclass definition utility   function defineSubclass superclass         Constructor of our superclass                           constructor      Constructor of our new subclass                           methods          Instance methods                           statics          Class properties            Set up the prototype object of the subclass     constructor prototype   Object create superclass prototype       constructor prototype constructor   constructor      if  methods  extend constructor prototype  methods       if  statics  extend constructor  statics       return constructor      For the last bit of preparation we enhance our Function prototype with David s new jiggery-pokery   Function prototype extend   function constructor  methods  statics        return defineSubclass this  constructor  methods  statics        After defining our Monster class  we do the following  which is re-usable for any new Classes we want to extend inherit    var Monkey   Monster extend             constructor     function Monkey             this bananaCount   5          Monster apply this  arguments         Superclass                     methods added to prototype               eatBanana  function                  this bananaCount--              this health                this growl

[javascript] JavaScript Extending Class

Examples related to javascript

Examples related to oop

Examples related to object

Examples related to inheritance

Examples related to ecmascript-6