Monday 23 June 2008

Getting intimate with Javascript objects part #2 - the modus operandi of methods

OK Gentle reader here we go with part 2 of this thread and tonight we will a closer look at methods. Now this has NOTHING to do with the way an actor analyzes deeply the motivations and emotions of the character in order to personify him or her with psychological realism and emotional authenticity (... och bless isnt he such a LOVEIEE!...) having said that Robert De Niro as Travis Bickle, need I say more?

... I digress. JS Objects and their methods. Put bluntly methods do things. They are just like ordinary JS functions except they are invoked through the object they are associated with.

Yesterday is said "You are not constrained when it comes to the type of Properties you can store in an object, any of the JS data types can be stored as a property in an object" ... remember? Well the other thing you can store as a data value is a function.
"No" i hear you cry "how do they do that?"
And I would reply, were you here "There were 2 people who knew, God and me, and now only God knows" so basically who cares, functions can be stored in the same way as data values! YIPEE! Ok so how do I "do" a method. Well lets look at this object.

var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";

After this code has run in the memory of the browser is an object called MyDingALing
which has two properties LittleBittyBoy which has a boolean value of true and SilverBells which has a value of "On String" lets say we want to add a method to this object we do this

var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { alert("Ooh you naughty BOY!") }

To invoke this all you need to do is this

MyDingALong.playWith()
Oddly this code actually works click below



Now methods have one very very important property and it is this. No really it is this. Yes this.
Sorry about that... geek pun.The this keyword in JS is the hook by which we can refer to the object that contains the method we are processing. Consider this

....(sorry did it again but this time by accident :-) )

var MyDingALing - new Object();
MyDingALing.LittleBittyBoy = true;
MyDingALing.SilverBells = "On String";
MyDingALing.playWith = function() { msgText = this.LittleBittyBoy?" are ":" are not ";

alert("You "+msgText+" in possession of the correct Little-Bitty-ness!")
}

this.LittleBittyBoy refers to the value stored in that property of object that invokes the
playWith() method. For those of you going WTF is something?this:that; Well it is a short hand way of doing an if .. then.. else and it works like this
[test of something that will evaluate to true or false]?[true result]:[false result];

OK?
So if I set the LittleBittyBoy property to true what happens


and if I set the LittleBittyBoy property to false what happens


Exciting init?

Anyway that is how you DO JS methods on an object.

Tomorrow's wander will be around the busty statues at the bottom of the JS garden that are Prototypes and Inheritance.

Disqus for Domi-No-Yes-Maybe