Creating modules and classes in JavaScript

Question

I'm trying to create a module in JavaScript. I want my module to have something like a class. I'm not sure if what I"m trying is possible. Essentially, I want to be able to do this in JavaScript:

var myObject = new myCompany.myLibrary.myClass();
myObject.myFunction();

Currently, I'm trying the following:

var myCompany = myCompany || {};
myCompany.myLibrary = (function() {    
    var myProperty = null;

    var anotherProperty = 'Hello';

    return {
        myClass: function () {
          return {
            myFunction : function() {
              console.log(anotherProperty);
            }
          };
        }
    };
})();

When I do this, I get an error that says "undefined is not a function". Is it possible to do what I'm trying to accomplish in JavaScript? If so, what am I doing wrong?

`var Klass = function(); Klass .prototype.method = function() {}; var instance = new Klass (); instance.method();` — Andreas Louv, Jul 02 '14 at 21:59
What environment are you running this in? In chrome this doesn't produce the error you are seeing: [fiddle](http://jsfiddle.net/42CCB/) — dc5, Jul 02 '14 at 22:04
your code works fine for me in chrome's console... i pasted the first block after the 2nd and it printed "Hello" to the console. — dandavis, Jul 02 '14 at 22:04
BTW: the way this is structured, the variables `myProperty` and `anotherProperty` will be shared among all instances of `myClass` Not sure if that was what you intended... — dc5, Jul 02 '14 at 22:07

s4y · Accepted Answer · 2014-07-02T22:16:42.020

0

This code works when I run it. Could you post a link to a working (er, broken) example?

By the way, since you're returning an object, you don't need the new operator. This works:

myCompany.myLibrary.myClass().myFunction(); // Logs "Hello"

If you are using new, you don't have to return a new object. You can change the body of myClass to something like this:

this.myFunction = function() {
    console.log(anotherProperty);
};

For what it's worth, I'd recommend against trying to emulate private members, and write your example more like this:

var myCompany = myCompany || {};

myCompany.myLibrary = {
    myProperty: null,
    anotherProperty: 'Hello',
    myClass: (function() {
        function myClass() {}
        myClass.prototype.myFunction = function(){
            console.log(myCompany.myLibrary.anotherProperty);
        }
        return myClass;
    })()
};

edited Jul 02 '14 at 22:16

answered Jul 02 '14 at 22:07

s4y

50,525
12
70
98

Please tell OP how to make use of the new operator and how the prototype works, instead of giving him a bad approach. – Andreas Louv Jul 02 '14 at 22:09
@NULL Good point. Let me know if what I added doesn't look like a solid example. – s4y Jul 02 '14 at 22:17
1

Your code will expose myProperty and anotherProperty for modification. This was not the way the OP had written it. – CrazyDart Jul 02 '14 at 22:22

CrazyDart · Answer 2 · 2014-07-02T22:16:47.123

How about this:

var MyCompany = MyCompany || {}; // Namespace
MyCompany.MyLibrary = function() { // this becomes the constructor   
    var mylib = this; // grab a ref to this, as it is context specific and not a good idea to use later.
    mylib.myProperty = null; // your first prop
    mylib.anotherProperty = 'Hello'; // your second prop

    // Returns an object that is actually not the object being "new'ed up", 
    // but will provide protection to everything inside it.  One of many ways 
    // to skin the cat.  I kept the code as close to the OPs code to get what he wants.
    // This isnt a class in how to write the best JS.
    return {
        myFunction : function() {
            console.log(mylib.anotherProperty);
        }
    };
};

var myLibrary = new MyCompany.MyLibrary();
myLibrary.myFunction();

Not sure why I got a -1... anyone willing to comment? Of course a prototype is a good idea... but is just another way to do it. — CrazyDart, Jul 02 '14 at 22:11

Creating modules and classes in JavaScript

2 Answers2