Trying to instantiate an animation class, getting "object is not a function"

Question

I'm trying to instantiate a class like this :

var drawCrash = new DrawCrash;

But I'm getting a TypeError: object is not a function.

I've defined the class like this -

var DrawCrash = {

  //Private variables
  canvas : ge1doot.Canvas(),
  particles: "",
  nbrParticles : 160,
  speed : 6,
  strength : .4,
  radius : 4,
  perspective : 0.5,
  ang : null,
  CosOrSin1 : null,
  CosOrSin2 : null,
  enum : {
   Wobble : "wobble",
   Twirl : "twirl"
  },
  setDrawing : function (type) {
   if (type === this.enum.Twirl){
       Blah blah blah
    this.cosOrSin2 = Math.sin;
   } else if (type === this.enun.Wobble){
    Blah blah blah
   } else {alert("Wrong enum for DrawCrash");}
  },
  startDrawing : function () {
    blah blah blah
  }
 }

Is there something wrong with this syntax?

Yeah, DrawCrash is not a function, so you can't new it. – Asad Saeeduddin Apr 22 '15 at 18:04 — Asad Saeeduddin, Apr 22 '15 at 18:04

score 1 · Answer 1 · answered Apr 22 '15 at 18:09

That is not how you instanciate an object in Javascript.

A "Class" in this world is simply a function:

function DrawCrash() {

  //Private variables
  var canvas = ge1doot.Canvas()
    particles: "",
    nbrParticles : 160,
    speed : 6,
    strength : .4,
    radius : 4,
    perspective : 0.5,
    ang : null,
    CosOrSin1 : null,
    CosOrSin2 : null,
    enum : {
      Wobble : "wobble",
      Twirl : "twirl"
    },
    setDrawing : function (type) {
      if (type === this.enum.Twirl){
        Blah blah blah
        this.cosOrSin2 = Math.sin;
      } else if (type === this.enun.Wobble){
        Blah blah blah
      } else {alert("Wrong enum for DrawCrash");}
   },
   startDrawing : function () {
     blah blah blah
   }
 }

And then you can instanciate it:

var drawCrash = new DrawCash();

However all of your variables seem to be private on this object. I you want to expose some as public, you need to put them on its "this":

function DrawCash() {
  // private variables
  var somePrivateVar = 42;

  // public variables
  this.publicVar = "hello";
}

var drawcash = new DrawCash();
drawcash.publicVar; // returns "hello"
drawcash.somePrivateVar; // undefined

Finally, in order to define a method on this "class" in an effective way, you need to extend that object prototype (Javascript is a prototype oriented language):

function DrawCash() { ... }

DrawCash.prototype.someMethod = function() { ... }

var drawcash = new DrawCash();
drawcash.someMethod();

You can learn more by reading this article for instance:

http://www.phpied.com/3-ways-to-define-a-javascript-class/

ar Duuuuuh! I get it now. Thanks! – realisation Apr 22 '15 at 20:27 — realisation, Apr 22 '15 at 20:27

score 0 · Answer 2 · edited May 23 '17 at 11:57

DrawCrash is a plain old javascript object (hence the error): an object literal. You access its properties and methods simply:

DrawCrash.startDrawing();

If you want to use the new operator then you need to create a function:

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

Then you can say something like

var foo - new Car('plymouth', 'something', 1978);

There's an interesting discussion of the two approaches here:

Should I be using object literals or constructor functions?

Trying to instantiate an animation class, getting "object is not a function"

2 Answers2