Javascript TypeError: ... is not a Constructor - How can I make Constructors from Constructors?

Question

I am trying to do object inheritance in Javascript - is the following possible to do in javascript?

Grandparent Object:

var shape=function(paramOpts){
    this.opts={x:0,y:0,h:10,w:10};
    $.extend(true,this.opts,paramOpts);
    this.sides=0;
    this.fill='#fff';
    this.outline='#000';
    // some methods
};

Parent Object

var square=new shape();
square.sides=4;

Child Object

var redbox=new square();
redbox.fill='#f00';

Running this I get the error TypeError: square is not a Constructor.

How can I make square a Constructor?

Constructor functions and prototype are explained here.stackoverflow.com/questions/16063394/… you could use only object.create but have to run an init function to initialize instance specific members and call parent to re use parent constructor/init — HMR
– HMR, Commented May 8, 2014 at 13:39

Dave Mackintosh · Accepted Answer · 2014-10-06 12:55:34Z

2

When you create square you don't get Function returned as your prototype, you get shape.

There are several ways you can inherit like this, personally; I like to use Object.create() i.e

function shape(paramOpts){
  this.opts={x:0,y:0,h:10,w:10};
  $.extend(true,this.opts,paramOpts);
  this.sides=0;
  this.fill='#fff';
  this.outline='#000';
  // some methods
};

var square = Object.create(shape);
square.sides = 4;

var redbox = Object.create(square);
redbox.fill = '#f00';

Support for Object.create goes as far back as IE9 but no farther, there are plenty of shims that will do this for you though.

If you don't want to use a shim you can do it the classical way, your shape definition's methods would be defined on the prototype chain for shape i.e:

shape.prototype.setFill = function shape_fill(colour) {
  this.fill = colour;
  return this;
};

And your following definitions of square and redsquare would simply "leech" the prototype from shape like below:

function square(){}
square.prototype = shape.prototype;

function redbox() {}
redbox.prototype = square.prototype;

I hope this helps and I've been clear :)

If I've not been clear, there's loads and loads of information on the various Object. functions on MDN

edit

Continuation from my last comment below, you can add a super method to your prototype to fire the construct like below:

redbox.prototype.super = square.prototype.super = function super() {
  return shape.call(this);
};

With that you should be able to call square.super() to run the shape construct and you can do the same for redbox to do the same.

You can also include the shape.call(this); code inside your square and redbox function definitions to do it, probably neater but it's your choice in honesty, personal taste lends my favour to prototype.

edited Oct 6, 2014 at 12:55

answered May 8, 2014 at 10:40

Dave Mackintosh

2,7942 gold badges32 silver badges41 bronze badges

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

4 Comments

Jimmery Over a year ago

Object.create() still kicks out the is not a Constructor error. I console.log the typeof shape and square (square made thru Object.create) and I get function and Function (the later being a Function Object I believe?) I get more success with the prototype method you describe, but then I cant access the parent object (or its methods/properties) from within any additional methods I add to the child object. Instead of this referring to the object I am adding the methods to, this refers to the method I am adding.

Dave Mackintosh Over a year ago

Ahh okay, that's my bad. If you try square.prototype.constructor = shape; You should have more success.

Jimmery Over a year ago

still failing - when I try that and console.log square it comes up as an empty function?

Dave Mackintosh Over a year ago

Interesting, okay there is another solution but it's a bit code heavy. I'll add it as an edit to my answer for you.

Abdennour TOUMI · Accepted Answer · 2014-05-08 10:48:03Z

square is not a function

You cannot instantiate from variable , However , you can instantiate from function .

Another thing , shape is not a GrandParentObject , It is a constructor in you context(=Class in OOP terminology) .

Use this function :

function inherits(base, extension)
{
   for ( var property in base )
   {


         extension[property] = base[property];


   }
}

Shape Class:

var shape=function(paramOpts){
    this.opts={x:0,y:0,h:10,w:10};
    $.extend(true,this.opts,paramOpts);
    this.sides=0;
    this.fill='#fff';
    this.outline='#000';
    // some methods'
    return this ; 
};

Grandparent Object :

var shape1=new shape();

Parent Object

 var square=new shape();
   inherits(shape1,square)
    square.sides=4;

Child Object

    var redbox=new shape();
  inherits(square,redbox)
    redbox.fill='#f00';

UPDATE:

I note your comment in Shape Class (//some methods) . However , if you talk about OO, Adding Methods to Your shape Class , it will be as following (Using Prototype) :

shape.prototype.Perimeter=function(){
   return this.opts.w * this.opts.h ;
}

Then you can apply it in your object shape1

shape1.Perimeter(); // 10*10=100

nettux · Accepted Answer · 2014-05-08 10:46:11Z

1

Here is a simple example of inheritance in JavaScript:

// Parent class
function Shape (sides) {
    this.sides = sides;
    this.fill='#fff';
}
// Child class
function Square (fill) {
    // run the Parent class' constructor
    Shape.call(this, 4);
    this.fill = fill;
}
// Instantiate Child class
var redbox = new Square('#f00');

answered May 8, 2014 at 10:46

nettux

5,4444 gold badges26 silver badges34 bronze badges

1 Comment

HMR Over a year ago

Better to use object.create instead of setting child prototype to an instance of parent stackoverflow.com/questions/16063394/…

Collectives™ on Stack Overflow

Javascript TypeError: ... is not a Constructor - How can I make Constructors from Constructors?

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related