JavaScript override methods

Question

Let s say you have the below code   function A         function modify            x   300         y   400             var c   new C       function B         function modify           x   3000         y   4000             var c   new C       C   function         var x   10     var y   20      function modify           x   30        y   40            modify       alert  The sum is       x y        Now the question is  if there is any way in which I can override the method modify from C with the methods that are in A and B  In Java you would use the super-keyword  but how can you achieve something like this in JavaScript

User · Answer

Once should avoid emulating classical OO and use prototypical OO instead. A nice utility library for prototypical OO is traits.

Rather then overwriting methods and setting up inheritance chains (one should always favour object composition over object inheritance) you should be bundling re-usable functions into traits and creating objects with those.

Live Example

var modifyA = {
    modify: function() {
        this.x = 300;
        this.y = 400;
    }
};

var modifyB = {
    modify: function() {
        this.x = 3000;
        this.y = 4000;
    }
};

C = function(trait) {
    var o = Object.create(Object.prototype, Trait(trait));

    o.modify();
    console.log("sum : " + (o.x + o.y));

    return o;
}

//C(modifyA);
C(modifyB);

User · Answer

Since this is a top hit on Google  I d like to give an updated answer   Using ES6 classes makes inheritance and method overriding a lot easier    use strict    class A       speak             console log  I m A             class B extends A       speak             super speak             console log  I m B             var a   new A    a speak       Output     I m A  var b   new B    b speak       Output     I m A    I m B   The super keyword refers to the parent class when used in the inheriting class  Also  all methods on the parent class are bound to the instance of the child  so you don t have to write super method apply this     As for compatibility  the ES6 compatibility table shows only the most recent versions of the major players support classes  mostly   V8 browsers have had them since January of this year  Chrome and Opera   and Firefox  using the SpiderMonkey JS engine  will see classes next month with their official Firefox 45 release  On the mobile side  Android still does not support this feature  while iOS 9  release five months ago  has partial support   Fortunately  there is Babel  a JS library for re-compiling Harmony code into ES5 code  Classes  and a lot of other cool features in ES6 can make your Javascript code a lot more readable and maintainable

User · Answer

the method modify   that you called in the last is called in global context if you want to override modify   you first have to inherit A or B    Maybe you re trying to do this   In this case C inherits A  function A         this modify   function             alert  in A             function B         this modify   function             alert  in B             C   function         this modify   function             alert  in C                C prototype modify       you can call this method where you need to call modify of the parent class    C prototype   new A

User · Answer

Edit  It s now six years since the original answer was written and a lot has changed    If you re using a newer version of JavaScript  possibly compiled with a tool like Babel  you can use real classes   If you re using the class-like component constructors provided by Angular or React  you ll want to look in the docs for that framework  If you re using ES5 and making  fake  classes by hand using prototypes  the answer below is still as right as it ever was     Good luck     JavaScript inheritance looks a bit different from Java  Here is how the native JavaScript object system looks      Create a class function Vehicle color     this color   color        Add an instance method Vehicle prototype go   function      return  Underway in     this color        Add a second class function Car color     this color   color        And declare it is a subclass of the first Car prototype   new Vehicle        Override the instance method Car prototype go   function      return Vehicle prototype go call this      car        Create some instances and see the overridden behavior  var v   new Vehicle  blue    v go       Underway in blue   var c   new Car  red    c go       Underway in red car    Unfortunately this is a bit ugly and it does not include a very nice way to  super   you have to manually specify which parent classes  method you want to call  As a result  there are a variety of tools to make creating classes nicer  Try looking at Prototype js  Backbone js  or a similar library that includes a nicer syntax for doing OOP in js

User · Answer

Not unless you make all variables  public   i e  make them members of the Function either directly or through the prototype property   var C   function          this x   10   this y   20       this modify   function              this x   30   this y   40           console log      C  gt  gt       this x   this y                   var A   function          this modify   function             this x   300   this y   400          console log      A  gt  gt       this x   this y                      A prototype   new C    var B   function          this modify   function             this x   3000   this y   4000          console log      B  gt  gt       this x   this y                    new C    modify      new A    modify      new B    modify          test it here     You will notice a few changes    Most importantly the call to the supposed  super-classes  constructor is now implicit within this line    lt name gt  prototype   new C     Both A and B will now have individually modifiable members x and y which would not be the case if we would have written       C instead   Then  x  y and modify are all  public  members so that assigning a different Function to them    lt name gt  prototype modify   function                    will  override  the original Function by that name   Lastly  the call to modify cannot be done in the Function declaration because the implicit call to the  super-class  would then be executed again when we set the supposed  super-class  to the prototype property of the supposed  sub-classes    But well  this is more or less how you would do this kind of thing in JavaScript   HTH   FK

User · Answer

modify   in your example is a private function  that won t be accessible from anywhere but within your A  B or C definition  You would need to declare it as  this modify   function       C has no reference to its parents  unless you pass it to C  If C is set up to inherit from A or B  it will inherit its public methods  not its private functions like you have modify   defined   Once C inherits methods from its parent  you can override the inherited methods

User · Answer

x000D   x000D  function A     x000D      var c   new C    x000D   c modify   function    x000D    c x   123  x000D    c y   333  x000D     x000D   c sum    x000D    x000D   x000D  function B     x000D      var c   new C    x000D   c modify   function    x000D    c x   999  x000D    c y   333  x000D     x000D   c sum    x000D    x000D   x000D   x000D  C   function      x000D     this x   10  x000D     this y   20  x000D   x000D     this modify   function     x000D        this x   30  x000D        this y   40  x000D        x000D      x000D     this sum   function    x000D   this modify    x000D   console log  The sum is       this x this y    x000D       x000D    x000D   x000D  A    x000D  B    x000D   x000D   x000D

[javascript] JavaScript override methods

Examples related to javascript

Examples related to oop

Examples related to overriding