Trouble Defining a Class in JavaScript

Question

I am trying to learn how to define a class in JavaScript. I found this link (http://www.phpied.com/3-ways-to-define-a-javascript-class/) but it doesn't seem to meet my needs. Essentially, I want to have a class that has properties and functions. When a class is initialized, I want to automatically call the init function. At this time, when I create a new Item using the following code, I get an error:

var item = new Item();

The error says: Object has no method 'init'.

My class definition looks like the following:

function Item() {
    this.id = null;
    this.name = "";
    this.description = "";

    this.init();
    this.init = function () {
        this.id = "54321";
    };
}

What am I doing wrong? How do I create a constructor in JavaScript?

James Hill · Accepted Answer · 2012-02-22 17:24:17Z

10

You're calling init() before you've defined it. Simply move the invocation below the definition:

function Item() {
    this.id = null;
    this.name = "";
    this.description = "";

    this.init = function () {
        this.id = "54321";
    };

    this.init();
}

answered Feb 22, 2012 at 17:24

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

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

1 Comment

sdrm Over a year ago

Still that's the wrong way of defining classes in Javascript. Everytime you make a new instance, the engine recreates all of the methods instead of just passing a new 'this' to them; You'd better use prototypes and the main function as constructor

steveukx · Accepted Answer · 2012-02-22 17:58:08Z

0

As you are instantiating the Item class, you could use the prototype of Item to take some of the logic out of the constructor. In the example below, Item is instantiated with all default properties from the prototype (including the init function)

function Item() {
  this.init();
}

Item.prototype = {
  id: null,
  name: '',
  description: '',
  init: function () {
    this.id = "54321";
  }
};

There are many ways to manipulate the prototype - here it is set to an Object to set all properties at once, but it could have had each item added individually by using Item.prototype.someVariable = something style syntax.

One note on setting the prototype - any non-primitive data type (ie: not boolean, number or string) will be shared across all instances (useful for sharing functions like the init function) whereas primitives will be per instance.

answered Feb 22, 2012 at 17:58

steveukx

4,34321 silver badges27 bronze badges

2 Comments

user208662 Over a year ago

Thank you for your answer. Please correct me if I'm wrong, but aren't boolean, number, and strings primitive types? Maybe i'm ready it wrong. Either way, how do I create instance specific Arrays?

steveukx Over a year ago

That's right - I was saying non-primitive which is not boolean number and strings... If you need arrays or objects on a per-instance basis, create them in the constructor or as part of another function on the prototype, eg function Item() { this.obj = {}; }

Aadit M Shah · Accepted Answer · 2012-02-22 17:27:57Z

0

You are calling the init method before it's defined. Only FunctionDeclarations in JavaScript are hoisted. Not FunctionExpressions assigned to a variable. Remember, only declarations are hoisted. Not definitions.

answered Feb 22, 2012 at 17:27

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

Collectives™ on Stack Overflow

Trouble Defining a Class in JavaScript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related