How to make a javascript class with a constructor method to initiate new objects / instances?

Question

I'm experimenting with javascript. I'm trying to make a "class" but it is not working like it should. I have problems initiating a new instance of MyClass. See the js fiddle. Is it possible to add a constructor to MyClass just like in php? I'm also not sure that this is the way "classes" are defined in javascript. So any help is more then appreciated.

http://jsfiddle.net/kasperfish/JnvFS/

    var MyClass={
        test:'hello',

        hallo: function(){
            alert(this.test);
        },

        setTest: function(x){
            this.test=x;
        }

    }

MyClass.hallo();
MyClass.setTest('world');
MyClass.hallo();

//not working because MyClass is/does not have a constructor
x= new MyClass;//*
x.hallo();

* firebug: TypeError: MyClass is not a constructor

Search before ask a question, bro: http://stackoverflow.com/questions/1114024/constructors-in-javascript-objects Hugs — Vitor Venturin, Oct 03 '13 at 23:48

score 2 · Accepted Answer · answered Oct 03 '13 at 23:42

In JavaScript, the constructor of a class is just a function, and the members are set either in there, or using the prototype object. For example:

function MyClass(someArgument) {
   // construction, init members of this
   this.someField = someArgument;
   this.test = 'a test';
}

// in addition, all members of `prototype` are automatically set on every 
// new instance of MyClass.
MyClass.prototype.hallo = function(){
         alert(this.test);
};

and then

var inst = new MyClass(42);
inst.hallo();

I suggest you read up on prototype-based OOP in JavaScript. It is definitely different than the one you may be used to from PHP, and it generally does not feel very intuitive.

score 1 · Answer 2 · answered Oct 03 '13 at 23:44

You're gonna have to make your MyClass Object a function like this:

var MyClass = function() {
    this.test = 'Hello';
};

MyClass.prototype.hello = function() {
    alert(this.test);
};

MyClass.prototype.setTest = function( x ) {
    this.test = x;
};

var myInstance = new MyClass();

myInstance.hello();
myInstance.setTest('World');
myInstance.hello();

score 1 · Answer 3 · answered Oct 03 '13 at 23:49

1

ok, firstly you should know that javascript does not have "classes" per say, javascript datastructures are indeed made of objects but as you can see from your code above, objects are essentially key-value pairs much unlike other languages like php, the implementation of OOP in javascript is very different.

if you would like to use a constructor to create instances of your object, then try and create your "class" using a function, a construtor, maybe in this way:

function MyClass(){
    this.test ='hello';
    this.hallo = function(){
                     alert(this.test);
                 };

    this.setTest = function(x){
                       this.test=x;
                   };
}

var myClassInstance = new MyClass();
myClassInstance.hallo();
myClassInstance.setTest('world');
myClassInstance.hallo();

i hope this helps

answered Oct 03 '13 at 23:49

kamikazeOvrld

914
8
9

1

Setting re-usable functions inside the constructor instead of attaching them to the prototype is a bit memory inefficient, as every new instance would be assigned new `hallo` and `setTest` functions. – Jon Koops Oct 03 '13 at 23:52
@jon Koops: thank you for the comment. I was wondering why I should use prototype if I could write my functions in the "class" itself. (at) kamikazeOvrld Also thanks for the answer. – kasper Taeymans Oct 04 '13 at 00:01
@kasperTaeymans No problem, glad to help. Using prototype is essentially saying 'I want this property to be available on all instances of this Object, and of course the Object itself'. – Jon Koops Oct 04 '13 at 00:08
@JonKoops true, true, but i find its makes for much tidier code and allows you to declare methods inside a single, convenient closure, in your constructor, but yes as far as advantages go, that's it. but yes, e prototypeis the place for reusable, cross-instance functionality. – kamikazeOvrld Oct 04 '13 at 00:16
1

maybe this rather, unconventional middleground: function MyClass() { if (!MyClass.prototype.aMethod) { MyClass.prototype.aMethod = function() {} } } – kamikazeOvrld Oct 04 '13 at 00:17
1

@kamikazeOvrld That's also an option, but much more verbose than it should be in my opinion. In the end it's a matter of preference. – Jon Koops Oct 04 '13 at 00:20

How to make a javascript class with a constructor method to initiate new objects / instances?

3 Answers3