Sunday, September 1, 2013

JavaScript : OOP part 1

if (!theFrontier.final()) {theFrontier.current(true, 'part 1');}


This is part 1 of a series of javascript articles. Despite its origins as a prototype and function based language, JavaScript is an object based language and has ascended to a primary role in all modern web applications. It is capable of polymorphism, encapsulation, inheritance, abstraction, and anything else you can think of that makes a language object oriented.

Object oriented JavaScript is no less dynamic and no less functional than any other JavaScript. It's just better organized, more easily managed and more easily maintained; it's more easily unit tested, more modular, etc, etc, etc... [We all know why OOP is good, right?] As more web application functionality moves to the client, it makes sense to follow better design practices with client side code.

JavaScript Inheritance:


Inheritance is a mechanism for code reuse. Generally speaking, it is simply a way to establish a hierarchy or relationships between objects. While JavaScript inheritance is prototypal, it can still observe and/or implement a classical inheritance pattern. In the example below, the methods of the Person object are available on the derived objects (eg: BankTeller, StayAtHomeDad) via the derived object's prototype. That said, I doubt I can sum up the various incarnations of javascript inheritance better than Douglas Crockford does here.



JavaScript Encapsulation:


Encapsulation generally has 2 aspects to it: 1) it serves to restrict access to an object's properties or components, and 2) it serves to bundle logical units of data/code together with methods intended to operate on that data/code. While JavaScript does not have 'classes', it is perfectly capable of first class encapsulation. In the example below, a Person can be sent and used anywhere, and it will already have a number of properties available on an instance of it. Although, those empty property references are not needed at all in JavaScript. I could simply add them whenever I needed them to any instance of the object via that instance's execution context or it's prototype (I will cover this in more detail later). Also in the example, a Gender literal object encapsulates the concept of allowable genders (notwithstanding absent restriction of access to get/set a Person object's gender).


JavaScript Polymorphism:


Polymorphism is the concept by which an object is also another object. So - in terms of nouns and verbs, both a golfer and a 16 year old girl are people and both can drive, but the golfer could drive a golf ball while the 16 year old girl might drive a '94 VW Beetle. Conceptually, it may help to think of this in terms of overriding a default behavior in child or derived objects. Perhaps a better example of polymorphism might be something like this - an animal is an object, a dog is an animal, a dog is a mammal, a human is a mammal, a human may or may not be an animal. Anyhow - in the example below, I kept the same theme going (as above) with a Person, BankTeller and StayAtHomeDad. All 3 objects are people, but when instanced, different things happen when they open drawers.


JavaScript Abstraction:


Abstraction is a term used to describe a separation of concepts from instances of implementation. In the example below, there is a private array called 'collection', which is added to whenever the user clicks the add button. Everything that occurs to get the example to function the way it functions is abstracted away from by means of encapsulating everything in one single call to bindAdd(). The bindAdd() function sets up the variables and handling in perpetuity, thus there is abstraction. There are probably better ways to express abstraction, but this works for now.



No comments:

Post a Comment