Javascript prototype.constructor not being called

Question

I am new to Javascript Object Oriented Programming. I need to write a JS class, which can be inherited. The complete class can be inherited. As well as whenever the document is ready, it gets called.

I am trying in this following way:

alert('reached');
var Hello = new VeerWidget();

function VeerWidget(){}

VeerWidget.prototype.constructor = function()
{
    $(document).ready(function(){
        alert('called');
    });
}

I have the above code in xyz.js

What I am expecting is: as soon as the page loads, popup with reached is called followed by popup with called.

But this is not working. popup with reached is called. However called is not called.

However when I am trying this way:

alert('reached');
var Hello = new VeerWidget();

function VeerWidget()
{
    $(document).ready(function(){
        alert('called');
    });
}

Everything goes fine. But I need to inherit VeerWidget. How to do this.?

study up on javascript variable "hoisting" if you want to learn why it doesnt work like you expect. — goat
– goat, Commented Feb 1, 2014 at 18:48
Change the order. You are initiating Hello and then setting the constructor. First define everything you need to define on VeerWidget and then make instances — Philipp Gayret
– Philipp Gayret, Commented Feb 1, 2014 at 18:48
@rambocoder: The reason why it doesn't work has nothing to do with hoisting. — Felix Kling
– Felix Kling, Commented Feb 1, 2014 at 19:29
@FelixKling: True, but the advice to look it up is good because it is the reason for the second example to work :-) — Bergi
– Bergi, Commented Feb 1, 2014 at 19:38

Tibos · Accepted Answer · 2014-02-01 18:53:39Z

4

The problem you have is that this line doesn't do what you think it does:

VeerWidget.prototype.constructor = function()

What it does is set a value to a property that is visible to all instances.

The constructor of the instances is actually the VeerWidget function and that doesn't change no matter what you do, so your code should be like this:

alert('reached');
var Hello = new VeerWidget();

function VeerWidget(){
    $(document).ready(function(){
        alert('called');
    });
}

As for inheritance, i'm not entirely sure what you're after, but it could look like this:

function InheritingWidget() {
    VeerWidget.call(this);
}

InheritingWidget.prototype = Object.create(VeerWidget.prototype);
InheritingWidget.prototype.constructor = InheritingWidget;

var inheritingHello = new InheritingWidget();

answered Feb 1, 2014 at 18:53

Tibos

27.9k4 gold badges56 silver badges66 bronze badges

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

Comments

ttvd94 · Accepted Answer · 2018-06-02 10:36:17Z

Simply execute prototype's constructor function by adding this line at the end of your main constructor:

if(typeof this.__proto__.constructor === 'function') this.__proto__.constructor();

The final result would be:

VeerWidget.prototype.constructor = function(parent) {
    var message = parent.getMessage();
    $(document).ready(function(){
       alert(message);
    });
}

alert('reached');
var Hello = new VeerWidget();

function VeerWidget()
{
    if(typeof this.__proto__.constructor === 'function') this.__proto__.constructor();
}

Note: You may pass the parent function to access it's methods like this:

VeerWidget.prototype.constructor = function(parent) {
    var message = parent.getMessage();
    $(document).ready(function(){
       alert(message);
    });
}

function VeerWidget()
{
    this.getMessage = function() {return 'called';};
    if(typeof this.__proto__.constructor === 'function') this.__proto__.constructor(this);
}

Collectives™ on Stack Overflow

Javascript prototype.constructor not being called

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related