3

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.

Improve this question

4 Answers 4

Reset to default
2

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.

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

Comments

2

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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 functions live on the prototype.

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

Prototypes are preferable because it means the work of defining the "class" is only done once. All instances share the same prototype - therefore one can achieve 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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.