Object Oriented JavaScript

javascript.gifJavascript has invaded my life. And I like it.

I have developed web applications for quite some time, writing Javascript off an often unnecessary tool that simply added frills. Over the course of this year - with the birth of the Ajax hype - I realize my error. I began inserting javascript all over hell's half acre and raving about its sweetness. I've grown in a year.

As I develop more javascript-rich web applications for my amusement and my job, I am constantly seeking better ways to structure both data and code. It wasn't until a month ago that I really began to dig into the Prototype and Script.aculo.us code (rather than simply using it) and began to grow aware of what was actually going on. Object Oriented Javascript.

I think it is important to note (so I don't look like a complete nitwit) that I was aware that Javascript had this capability a couple of months back before I picked up and started using the afore mentioned Javascript libraries...I just had no drive to learn it and spot where it was being used. I have seen the light and it is good.

What are its benefits? Well, pretty much the same applies to Javascript that applies to any other programming language...OOP helps increase organization and reduce un-needed redundancy. And best of all? It helps prevent dual-declared functions and variables. That is the reason I chose to begin my quest for OO-JS familiarity.

I had gone hunting at a few other sites that claimed to be good references (obviously) of OO-JS, but they lacked the topic of inheritance, which is the real strength of any OOP Language. The most helpful article I found on the topic was at WebReference. They discuss the use of prototype (Not the Javascript Library). Here's a quick excerpt, but I'd suggest you read the article for yourself!

Excerpt from WebReference

JavaScript:
  1. function Person() {
  2.       this.name = "Rob Roberson";
  3.       this.age = 31;
  4. }
  5.  
  6. function Employee() {
  7.       this.dept = "HR";
  8.       this.manager = "John Johnson";
  9. }
  10.  
  11. Employee.prototype = new Person();
  12.  
  13. var Ken = new Employee();

Ken is in the prototype chain of Employee, Person, and Object.

Check it out. Use it. You'll like it. You're applications will like it. Oh, and it may prove useful to check out some Javascript Coding Conventions.

Discuss This Article


6 Responses to “Object Oriented JavaScript”

  1. pingback pingback:
    BorkWeb » Blog Archive » Ajax; Templating; and the Separation of Layout and Logic

    [...] I have often mentioned my process of expanding my proficiency of Ajax. Through my journey I have made a number of wrong turns and hit my share of stumbling blocks. All of that has been a learning experience and I’m learning still. I began fiddling with XMLHttpRequest as many do - blissfully ignorant of the many frameworks that exist to make Ajax super easy. My code was bloated with some neat…’features’ (pronounced: bugs). [...]

    Reply to this comment.
    1
  2. AvatarKrzysztof

    something has been spoiled with your decorative links at the end of your blog - I had to ‘view source’ to retrieve them!

    Reply to this comment.
    2
  3. AvatarMatt
    Author Comment

    Should be all fixed now :) Thanks for the heads up!

    Reply to this comment.
    3
  4. AvatarJeroen

    For people that are interested in a Java/C#-style OOP in JavaScript, I have created a small shareware library. You can download it at http://software.antrix.nl/

    Reply to this comment.
    4
  5. pingback pingback:
    BorkWeb » Geeks, Nerds and Dweebs

    [...] I’m proud of my Geekiness. I’ll be the first to call myself a geek, but what really irks me is when I proclaim myself as one, my family immediately replies with a “nahhh…you’re not a geek,” in a comforting tone. I’ve worked hard to be obsessive over random things (Star Wars, Warcrack, Programming, etc)…let me have my cake and eat it too :) [...]

    Reply to this comment.
    5
  6. AvatarUselessPickles

    I’d like to challenge Jeroen with my object-oriented framework at http://www.uselesspickles.com/blog/the-class-library/ :).

    Reply to this comment.
    6

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview:

 (4443) - oo js (17) - jquery oop (14) - javascript object size (14) - jQuery object oriented (13) - object oriented jquery (10) - jquery oo (6) - javascript oop (5) - javascript object length (4) - oo jquery (4) - javascript oop jquery (4) - oop jquery (4) - js object size (3) - javascript OOP pdf (3) - My Object Oriented Javascript Tools (3) - object oriented javascript jquery (3) - javascript jquery oop (3) - object oriented javascript (3) - javascript (3) - object length javascript (3) - javascript object orientation structure (3) - javascript size of object (2) - jQuery object oriented Javascript (2) - javascript length of object (2) - OO and jquery (2) - size of javascript object (2) - jquery oop plugin (2) - javascript prototype OOP (2) - javascript jquery object oriented (2) - jquery object oriented programming (2) - object-oriented jquery (2) - check object in javascript (2) - javascript object exists (2) - js oop (2) - javascript make OOP library (2) - test for object in Javascript (1) - size of object javascript (1) - object oriented framework javascript (1) - javascript create library OOP (1) - length of object in js (1) - test object class javascript (1) - javascript object oriented jQuery (1) - javascript object oriented programming struct (1) - oop js (1) - JavaScript jQuery block object (1) - javascript checking if object exists (1) - jquery object oriented programing (1) - jquery object orientation (1) - size of object in javascript (1) - how to check for existence of element in javascript (1) - what is the benefit of prototype - javascript (1) - jquery functional object-oriented (1) - prototype test an element exists (1) - javasript oo (1) - youtube javascript OO (1) - pdf on object oriented javascript in C# (1) - object size javascript (1) - Object javascript from c# (1) - object oriented in javascript (1) - java script prototype exist (1) - javascript length object (1) - javascript checking for existence of an object (1) - javascript check object attrib (1) - object oriented javascript prototype.js (1) - javascript object.length (1) - check for existence of object javascript (1) - jquery class oo (1) - oop (1) - js oop framework (1) - check object exists JS (1) - Check Object existence in javascript (1) - javascript, check object exist (1) - javascript oop object size (1) - object javascript size (1) - counting size of object javascript (1) - javascript oop benefits (1) - prototype.js element exists (1) - oop javascript framework (1) - ajax (1) - object oriented javascript programming (1) - javascript library oo (1) - javascript oop frameworks (1) - OOP with jQuery (1) - javascript check for object existence (1) - javascript check if object exists (1) - prototype test element exists (1) - My Object Oriented Javascript (1) - oo in js (1) - javascript test for object (1) - javascript object.size (1) - javascript oo framework (1) - JS Object Exists (1) - firefox (1) - "object oriented" (1) - javascript check object (1) - OO in javascript (1) - learning object oriented javascript (1) - Javascript object programing (1) - prototype check if object exists (1) - javascript check object size (1) - learn oop javascript (1) - javascript oop prototype (1) - javascript oop library (1) - test object javascript (1) - object Cursor Size javascript (1) - oop javascript prototype (1) - jquery object oriented javascript application (1) - object .length JS (1) - jquery oop js class (1) - jquery plugin like javascript oo (1) - Is JQuery Object Oriented (1) - is jquery oo (1) - cursor which object javascript (1) - js object length (1) - Exists javascript (1) - oo in jquery (1) - object oriented in jQuery (1) - learning oo js (1) - object oriented javascript with jquery (1) - jquery plugin oop (1) - test javascript object attribute (1) - jquery object orientated (1) - Download My Object Oriented Javascript Tools (1) - prototype js oop (1) - learn javascript with oop (1) - My Object Oriented Javascript Tool (1) - javascript check object is exist (1) - class object oriented jquery (1) -