Creating Objects in JavaScript Part 1

Going from writing ActionScript 3 (AS3) and Flex applications to HTML5/JavaScript is like stepping into a time machine!  JavaScript (JS), while a very powerful language, lacks many of the object oriented (OO) programming features that have become standards of most modern languages.  Things like strongly typed variables, multiple inheritance and clearly defined scopes are not available in JS.  All of these nuances can make going from AS3 to JS… unpleasant.  Have no fear though, over the next few blog posts I plan to discover and explain how to overcome these obstacles and better understand HTML5.  I’m learning this myself, so bear with me and feel free to leave comments if something isn’t clear or is inaccurate.  Sharing is caring.

Alright, so here we go.  Lets start out just discussing some of the primitive objects that are built into AS3 and what their JS counterpart is.

 1. Object
 2. Number | int | unit
 3. String
 4. Boolean
 5. Array
 6. Dictionary
 7. Array
 8. Date
 9. Function
 10. Class
 11. Prototype
 12. Getter / Setter

 1. Object
 2. Number
 3. String
 4. Boolean
 5. Object
 6. Object
 7. Array (Object)
 8. Date
 9. Function
 10. Function
 11. Prototype
 12. Function

Notice how many of those primitives are simply of type Object?  That’s because everything except for those few primitives such as String, Number, Boolean, Array, and Date are either Objects or Functions.  What about Prototype? Well that’s a special case I will discuss in more detail in a later post.  (Note that just because JS and AS3 both have a ‘Date’ or a ‘String’ object, does not mean that they will have the same properties and functions.)

So how do we create our own objects in in JavaScript?  One of the simplest ways is to declare them inline with code.  This will give you an object that can be used in the global space or within functions, but doesn’t offer anything in the realm of reusability.  Here’s an example where we create a new object with its own properties and a single function:

As you can see, the functions and the properties we’ve declare within the var artist are available.   But what would happen if we later put artist.drink = function { return ‘Drinking lots of milk’ }?  The function would return ‘Drinking lots of milk!’, and lets face it, artists want scotch whiskey!  So lets figure out how to make our artist object both reusable, and attempt to privatize some of those variables and functions.  Observe our new Artist:

{code type=javascript}
function Artist( name, medium ) {
var name = name;
var hunger = 1; //
this.medium = medium;

this.getName = function() {
return name;
}

this. makeArt = function() {
hunger–;

}

this.feed = function( amount ) {
hunger += amount;
}

this.getHunger = function() {
return hunger;
}
}

// SCENARIO A
var a = new Artist( ‘DC’, ‘Oil Paint’);
alert( ‘Name: ‘ + a.name ) // Name: undefined
alert( ‘Name: ‘ + a.getName() ) // Name: DC
a.name = ‘I broke it.’
alert( ‘Name: ‘ + a.name ) // Name: I broke it
alert( ‘Name: ‘ + a.getName() ) // Name: DC

// SCENARIO B
a.feed( 5 );
alert( a.hunger ); // undefined
alert( a.getHunger() ) // 6

// SCENARIO C
alert( a.medium ); // Oil Paint
a.medium = ‘Clay’;
alert( a.medium ); // clay

// SCENARIO D
a.getHunger = function(){ return ‘aw crap, a developer can still break me!’ };
alert( a.getHunger() ) // aw crap, a developer can still break me!

{/code}

So we have a constructor function for Arist, that takes two parameters, a name and a medium.  The name we put int to a basic ‘var name’ statement, which means that it will be accessible to everything within the function, but not outside of it.  The medium property we assign to a this.medium.  This is an important property in JS.  ’this’ properties are available essentially public properties.   We also have a var hunger, which is essentially private.  As you can see, its used in the public functions for paint, feed and getHunger.

Scenario A

We create our new Arist.  Next we ask for its name directly, and we are notified that it is undefined.  Thats because the name property is private within the Artist function.  To get the name, we need to call its getter function, getName().  We wanted the name to be read-only once our Artist is initialized.  However, as you can see in SCENARIO A, you can still assign a new name property to our Artist.  This doesn’t overwrite our artists actual name property.

Scenario B

Artists are typically starving, and our current artist is no exception.  Every time our artist makeArt, he gets more  hungry!  The feed function takes a parameter and adds it to hunger.  We don’t want a user to be able to manipulate hunger without feed or makeArt.  Requesting to see hunger directly results in undefined.

Scenario C

Since we don’t care if the artist changes his medium at any time, that property was defined with a this in the constructor, and is there for a public variables.

Scenario D

Finally, we show that no matter what you do, JavaScript is a hugely dynamic language, and you just can’t save a developer from himself.  You may able to make the logic in a function private, create getter/setters and make read-only properties, but all of that can be written over by just assign a new property to the function itself.

Thats all for now!  I’ll continue to blog and write as I dive deeper into the language.