Javascript "classes" (no frameworks)

Question

I'm doing my first javascript project that makes heavy use of objects. Because of how it works, nearly all the custom objects are done like this:

namespaceobj = {};
namespaceobj.subobject = {};
namespaceobj.subobject.somefunction = function(arg, uments) {
    // Do Stuff
}
namespaceobj.subobject.somedata = 10;
namespaceobj.othersubject = {};
namespaceobj.othersubject.somefunction = function(some, args) {
    // Do more stuff
}
// More subobjects etc.

Which is fine, as all the custom objects only have a single instance anyway (examples of subobjects are the UI, the tools, the shared data, etc.).

However I have seen code done something like this (syntax is probably wrong, this is just from memory of seeing similar code)

function SomeClass() {
    this.somedata = 42;
    this.somefunction = function(a, few, args) {
        // Do Stuff
    }
}
// More classes and stuff
// Elsewhere:
someInstance = new SomeClass(); // AFA I recall, new was optional
someInstance.somefunction();

Could someone explain how the "classes" in the second example work, and any pitfalls I might encounter while using them.

Answer 1

Perhaps this article on Functional Javascript might help you.

Answer 2

Second example is more clear, and data are encapsulated. It means, some class variables can be calculated using temporary ones. Also second examples is better for making more objects of same type, but in your case it's not important. Anyway it won't slow down your code, so you can do it as you like.

Answer 3

This is a pretty big topic but what you are seeing is the difference between object literal notation (your first example) and JavaScript's particular brand of OOP. The main difference you will encounter between the two is that you first example has only one, static instance while a revised version of your second example (you were close) would allow you to create multiple instances of the class.

I would suggest that you read JavaScript and Object Oriented Programming (OOP):

JavaScript is an excellent language to write object oriented web applications. It can support OOP because it supports inheritance through prototyping as well as properties and methods. Many developers cast off JS as a suitable OOP language because they are so used to the class style of C# and Java. Many people don't realize that JavaScript supports inheritance. When you write object-oriented code it instantly gives you power; you can write code that can be re-used and that is encapsulated.

Answer 4

I think this tutorial is quite easy to understand http://www.sitepoint.com/article/oriented-programming-1/

Answer 5

I think the syntax you were thinking of looks like this:-

function SomeClass() {
    var somedata = 42;
    this.somefunction = function(a, few, args) {
    // Do Stuff like:-
    return somedata + a;
  }
}
// More classes and stuff
// Elsewhere:
someInstance = new SomeClass(); // AFA I recall, new was optional
someInstance.somefunction(15);  //returns 57

The function that is assigned to the somefunction is created in an Execution Context which results when a function is executed (in this case when SomeClass() is executed as part of the new operation that is assigned to someInstance). Functions can access variables that are part of the execution context in which they are created, so in this case somedata is a variable that somefunction has access to.

This approach effectively makes somedata the private state of the object, since only functions created inside the SomeClass function body can access it.

This is an oversimplification, you should consider researching Javascript without reference to OO programming first, learn about scope chains and prototype chains. When you understand these you can better understand the number of different approaches to implementing an OO design in Javascript and which approach best fits your needs.

Answer 6

The second form is perhaps the better form because it creates a "Class" that has numerous functions living on its prototype. When a new Class is created the new instance also gets its prototype set to the same thing. In the Class example the funtions live on the prototype.

The first examples simply create an object with a lot of functions reasssigning the same functions to each object eacch time one is necessary.

Prototypes are preferrable because it means the work of defining the "class" is only done once. All instances share the same prototype - therefore one can acheive powerful constructs like adding/changing/removing functions and all instances will see the change. In the first example you give they are all independent objects where one can change anything on any instance independently.

In the end all Javascript objects are hashtables of properties and functions. WHen one access an object via "object.something" everything is a value including functions. However when one uses the function invocation notation "object.foo(...)" the runtime attempts to find a "foo" on "object". If the runtime fails to find a "foo" on "object" it will then try and find a "foo" on the prototype of "object". This continues until something is found or no more prototypes remain.

The runtime will then try and invoke "foo" passing parameters etc. Naturally things blow up if foo is not a function.