Manage JS inheritance failure

Question

I am new to Object Orientated Programming, please have in mind. I have understood how the first part shown here works (it does):

function Car() {

    var  __registration;

    var setReg = function(val) {
         __registration= val;
    }

    var getReg= function() {
        return  __registration;
    }


    return {
        setReg: setReg ,
        getReg: getReg

    }

}

var myCar = new Car();
myCar.setReg("LSKM5215");
alert(myCar.getReg() );   //ALERTS LSKM5215

But when trying to manage inheritance on this way of Object Orientated Programming, it just fails once and again:

function Extras(){

    var  __sound;

    var setSound= function(val) {
         __sound= val;
    }

    var getSound= function() {
        return  __sound;
    }


    return {
        setSound: setSound,
        getSound: getSound

    }

}

Extras.prototype = new Car();

myCar.setSound("SUPERB SOUNDSYSTEM 2.2");    //TypeError: myCar.setSound is not a function

How could I create inheritance on this case? To make Car() get the private variables about the "soundsystem extras"?

Very grateful.

you not need `return`, when plan use function as constructor — Grundy, Apr 26 '16 at 15:01
You are not using constructor functions but factory functions. myCar does not inherit anything from either Car or Extras functions. — Redu, Apr 26 '16 at 15:02
in your case - `myCar` is object _base_ class, you add additional method in extras, that should be derived, so how object of base class can know about new method in derived? — Grundy, Apr 26 '16 at 15:03
So @SergiuParaschiv, I need to first assign new Extras() to my newCar I understand? I'll try — gas1986, Apr 26 '16 at 15:03
If you're using Node or a transpiler like Babel (writing react or Angular 2 for instance) you should just use `class`. — Benjamin Gruenbaum, Apr 26 '16 at 15:05
I suggest you read this: http://stackoverflow.com/questions/892595/understanding-prototypal-inheritance-in-javascript It's far more in-depth than any answer we could duplicate here. — Sergiu Paraschiv, Apr 26 '16 at 15:12
@BenjaminGruenbaum look at the transpiled code and you'll find there's nothing magic about it, it's still basic prototype based inheritance. — Sergiu Paraschiv, Apr 26 '16 at 15:13
@SergiuParaschiv, even when I assign to myCar = new Extras(), does not work (it even does not recognise now the myCar.setReg() as a function). Could you explain me the correct way to solve this? — gas1986, Apr 26 '16 at 15:13
@SergiuParaschiv you know that, I know that, but for someone learning it would be great to learn it the simple way first and only then get into prototypical inheritance. Syntax matters IMO :) — Benjamin Gruenbaum, Apr 26 '16 at 15:21
In the long run I think learning it "low-level" _is_ the simple way. — Sergiu Paraschiv, Apr 26 '16 at 15:21
@SergiuParaschiv so the problem was just on the return I guess from your example. If I take out the return, is this still a private way of OOP? All was right except for that final return... — gas1986, Apr 26 '16 at 15:22
@gas1986 Not quite. Also pay attention to the property functions - `var functionName` is not the same as `this.functionName` — Reinstate Monica Cellio, Apr 26 '16 at 15:23
@Archer you are right. By this way, is this still a private way of OOP? That's the first way I learned OOP, as a non-private way of programming. Is this getting back to the public method? — gas1986, Apr 26 '16 at 15:29
You originally mixed public and private by having private property functions and passing references in the return value. You can keep private functions private by simply not specifying `this` when creating them, if that's what you're asking. — Reinstate Monica Cellio, Apr 26 '16 at 15:33
As a sidenote, Javascript isn't traditionally OOP, so you're better off using Typescript to learn about OOP principles, if that's what you're aiming for — Ozrix, Apr 26 '16 at 15:39

score 0 · Accepted Answer · answered Apr 26 '16 at 15:32

You not need return when plan use function as constructor.

in derived class you should call base constructor with needed parameters.

in derived class assign proptotype based on base prototype.

Something like this:

function Car() {

  var __registration;

  this.setReg = function(val) {
    __registration = val;
  }

  this.getReg = function() {
    return __registration;
  }

}

function Extras() {
  Car.call(this);
  var __sound;

  this.setSound = function(val) {
    __sound = val;
  }

  this.getSound = function() {
    return __sound;
  }

}

Extras.prototype = Object.create(Car.prototype);

myExtras = new Extras();
myExtras.setReg("LSKM5215");
myExtras.setSound("SUPERB SOUNDSYSTEM 2.2");

document.write("<div>Extras: reg - ", myExtras.getReg(), '</div>');
document.write("<div>Extras: sound - ", myExtras.getSound(), '</div>');

And for ES2015 you can use classes

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.height * this.width;
  }
}

class Car {

  constructor() {
    this.__registration = undefined;
  }

  set Reg(val) {
    this.__registration = val;
  }

  get Reg() {
    return this.__registration;
  }

}

class Extras extends Car {

  constructor() {
    super();
    this.__sound = undefined;
  }

  set Sound(val) {
    this.__sound = val;
  }

  get Sound() {
    return this.__sound;
  }

}

myExtras = new Extras();
myExtras.Reg = ("LSKM5215");
myExtras.Sound = ("SUPERB SOUNDSYSTEM 2.2");

document.write("<div>Extras: reg - ", myExtras.Reg, '</div>');
document.write("<div>Extras: sound - ", myExtras.Sound, '</div>');

Manage JS inheritance failure

1 Answers1