In this post I do a rundown of my knowledge or my take to crating OOP like structure in JS (JavaScript). Amongst other - you should read this article (I haven't read it but it looks nice :-)).
JavaScript is not really an OOP (Object-oriented programming) language as you may know it from Java or C# etc. It's not as controlled and hard typed, but you can gain pretty much the same benefits as encapsulated properties in the object, inheritance etc. I wont go into details of the inner workings, just show a few sample that might get you started.
There are many JS libraries out there that makes life easier. One of them is MS Ajax / Microsoft Ajax for ASP.NET or what ever. The MS-AJAX consist of both server- and client site making it easy to make HTML element update them self without reloading the whole page. But it's also a JS client library for making JS programing a bit more easy. Check out the client reference documentation here.
In short, these libraries extends the basic JS objects with new functions and provides new objects.
Let's have a look on how we can extend the basic JavaScript. I will use some simplified versions of the ones that are in the MS AJAX client library - mostly removing the exception handling / valid argument checking.
Extending JavaScript
Let's extend the Array and String objects in to ways:
1: Array.clear = function Array$clear(array) { 2: array.length = 0;
3: }
4:
5: String.prototype.startsWith = function String$startsWith(prefix) { 6: return (this.substr(0, prefix.length) === prefix);
7: }
In line #1 the Array.clear function is added to the Array object as what I would like to call: as a "static" method, and in line #5 the String object is extended with an "instance" method.
The difference between these two are, that the array extension are called by Array.clear(myArray) and the string method are called on the initiated object itself as "myString".startsWith(..);
Let have a look on how to use the above.
The Array Extension
1: // Create an array
2: var myArray = new Array();
3: // Create it again (just to show)
4: myArray = [];
5:
6: // Add a string to the array using index
7: myArray[myArray.length] = "Hello";
8: // Add a strings to the array using push
9: myArray.push("world", "..."); 10:
11: // Shows "Hello,world,..."
12: alert(myArray);
13:
14: Array.clear(myArray);
15:
16: // Shows "" - the array is now blank
17: alert(myArray);
18:
19: // Creates the array in one take
20: myArray = ["Hello", "world", "..."];
21: // Shows "Hello,world,..."
22: alert(myArray);
In line #2 the array is created in a normal fashion as known from C# etc. In line #4 the array is recreated to show that instead of writing "var myArray = new Array()" we can just write "var myArray = []".
In line #7 we add an entry to the array by the index number - in this case the length or count of the numbers of entries in the array. This is JS only code, since most languages would yield a past index error here - but JS is "dynamic" (by the good and the evil). Remember that JS array unlike VB (Visual Basic) etc. arrays are 0 based, so myArray[0] = "..." has the length/entry count of 1. The last element of an array or a string is always: myArray[myArray.length - 1].
In line #9 we use a method called push to add one or more object (in this case strings) to the array. It could be myArray.push("one") or myArray.push("one", "two" three") etc.
The alert of myArray in line #12 will automatically combine the array elements into one string separated by ",". This is just to show the result on what we have done until know.
Extension? We are here now: In line #14 we call the Array.clear that calls the our extension function. This function is not an instance function, so we can't call it by using the instance of the array object as in myArray.clear() - it's a class function also called a static function. A function, method, subroutine, procedure, or subprogram - all the same.
I'll let the rest of the code speak for it self by referring to the Array documentation.
The String Extension
The string extension is a instance extension done using the "prototype".
1: var myString = "Hello world!";
2:
3: // Shows "true"
4: alert(myString.startsWith("Hello")); 5:
6: // Shows "false"
7: alert(myString.startsWith("hello")); 8:
9: // Shows "true"
10: alert("Just checking".startsWith("Just"));
So this extension is called on the instance of the object itself. Note that string are case sensitive and that "hello" is a string object. To in line #10 the "Just checking" is an instance of type String object - and therefore out extension function can be called.
This is a part of a work internal self-study course where I'm trying to share some knowledge about html, css and JavaScript. I'm posting tips and tricks here in my blog over the next few weeks.