Object is not calling child class function in javascript

Question

I have created a model of classes in Javascript. I am passing an object of base class to child class, so that I can override its properties. But when I call a function by instantiating a child class it stills calls a base class function. I think it should call a child class function. Below is the code.

function BaseClass(name,lastName){
  this.name = name;
  this.lastName = lastName;   
}

BaseClass.prototype.getName = function() {
  return this.name;
}
BaseClass.prototype.getLastName = function() {
  return this.lastName;
}
BaseClass.prototype.saveName = function() {
  console.log("In base class function.");
}

function ChildClass(){
  this.name = this.getName();
  this.lastName = this.getLastName();
}
ChildClass.prototype.saveName = function() {
  console.log("In child class function.");    
}

ChildClass.prototype = new BaseClass(name,LastName);
var childClass = new ChildClass();
childClass.saveName();

Aioros · Accepted Answer · 2014-01-15 10:43:34Z

1

I think what is happening is, in this line:

ChildClass.prototype = new BaseClass(name,LastName);

you are basically overwriting the prototype property of ChildClass with a new BaseClass(). So the previous line

ChildClass.prototype.saveName = ...

is ineffective. To build an inheritance mechanism in JavaScript, check out this guide or one of many libraries available. Or, in this specific simple case, try swapping the order of the two above lines.

answered Jan 15, 2014 at 10:43

Aioros

4,3931 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthew Layton · Accepted Answer · 2014-01-15 10:45:15Z

There is an issue with your inheritance model. You might find it easier to model things like this with TypeScript or Dart

I have already modelled this for you:

TypeScript:

class BaseClass {
    constructor(private name: string, private lastName: string) {
    }

    public getName(): string {
        return this.name;
    }

    public getLastName(): string {
        return this.lastName;
    }

    public saveName(): void {
        console.log("In base class function");
    }
}

class ChildClass extends BaseClass {
    public saveName(): void {
        console.log("In child class function");
    }
}

var childClass = new ChildClass("John", "Smith");
childClass.saveName();

JavaScript (TS compiler output):

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var BaseClass = (function () {
    function BaseClass(name, lastName) {
        this.name = name;
        this.lastName = lastName;
    }
    BaseClass.prototype.getName = function () {
        return this.name;
    };

    BaseClass.prototype.getLastName = function () {
        return this.lastName;
    };

    BaseClass.prototype.saveName = function () {
        console.log("In base class function");
    };
    return BaseClass;
})();

var ChildClass = (function (_super) {
    __extends(ChildClass, _super);
    function ChildClass() {
        _super.apply(this, arguments);
    }
    ChildClass.prototype.saveName = function () {
        console.log("In child class function");
    };
    return ChildClass;
})(BaseClass);

var childClass = new ChildClass("John", "Smith");
childClass.saveName();

Play on the TypeScript Playground

Tibos · Accepted Answer · 2014-01-15 11:03:12Z

0

As the other answers mentioned, you have a significant issue with the inheritance model.

At this line:

ChildClass.prototype = new BaseClass(name,LastName);

The name and LastName are probably undefined, since you are looking for them in the global scope (or the scope you defined your classes in). They have absolutely no connection with what is passed as argument to the constructor of ChildClass.

Instead, you want to call the base class constructor from the child constructor, like this:

function ChildClass(name, lastName){ // parameters should be declared
  BaseClass.call(this, name, lastName); // call the base class
}

By calling BaseClass with the first argument this, you have essentially run the code of the BaseClass function with this being your new instance of ChildClass. The code in BaseClass has set childClass.name and childClass.lastName properties, so you don't need to do that in ChildClass.

To finish the inheritance model, you also need to inherit methods from the prototype of the base class:

ChildClass.prototype = Object.create(BaseClass.prototype);

Notice that you don't inherit them from an instance of BaseClass, because you don't know with what parameters you should call the constructor and it's not always correct to call it with no parameters.

One final thing, make sure that the line setting ChildClass.prototype is before any method/property defined on ChildClass.prototype, otherwise you simply overwrite it.

Full code:

//===== BaseClass
function BaseClass(name,lastName){
  this.name = name;
  this.lastName = lastName;   
}

BaseClass.prototype.getName = function() {
  return this.name;
}
BaseClass.prototype.getLastName = function() {
  return this.lastName;
}
BaseClass.prototype.saveName = function() {
  console.log("In base class function.");
}

//======= ChildClass
function ChildClass(name, lastName, age){
  BaseClass.call(this, name, lastName);
  this.age = age;
}
ChildClass.prototype = Object.create(BaseClass.prototype);

ChildClass.prototype.saveName = function() {
  console.log("In child class function.", this.name, this.lastName, this.age);    
}

//=========== usage
var childClass = new ChildClass('john', 'doe');
childClass.saveName();

answered Jan 15, 2014 at 11:03

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

2 Comments

JN_newbie Over a year ago

Thanks for a great explanation. I will follow this model to look into it. It works actually. but I was looking for something like a polymorphism concept as well. once again thanks.

Tibos Over a year ago

@Java_NewBie Glad to help. Actually the polymorphism thing sounds like an interesting question. I have some ideas regarding that and would be happy to share them if you run into other problems.

Collectives™ on Stack Overflow

Object is not calling child class function in javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related