I'm a seasonal JavaScript Programmer. The OO JS was obscure to me when I started. I'm not a geek yet and never would be.... but after read many OO JS articles I got some concept. There is a download link inside the file. I think this would be beneficial for JavaScript Beginners.

1. Munir Hoque Object Oriented JavaScript

4. What did I just see ? I created an Object called obj. But where did the additional object “Prototype” come from ? Well, I’ll discus abut the “Prototype” later. But for now, please keep in mind – Every time an object is created an additional object “Prototype” along with it’s property “constructor” will be created automatically. 3 Sentrana The JavaScript Object (cont…)

6. When a function is called with the newoperator, the function serves as the constructor for that class.

7. Let’s have a look to the code snippet defines a new class, Foo, and then creates a single object of that class – function Foo() { this.x = 1; this.y = 2; } obj = new Foo(); Inside the constructor, the variable this is initialized to point to the just created Object. 4 Sentrana The Amazing JavaScript Function

8. Do you want to check our newly created object ? Well, add an property to our newly created object obj. obj.c = 100; alert(obj.c); // Outputs 100 As I said earlier in javascript you can assign properties at any time to the Object. So, our obj.c = 100; statement is lawfully correct. Caveat : The property “c” we just added to the objwill be visible just within the object. If we create another object of Foonamed obj1and try to access the “c” property we would not get it. obj1 = new Foo(); alert(obj1.c) // undefined. It is a common pitfall for mainstream programmers form C++/JAVA/C#. Please recall , an object inn JavaScript can add its property any time. An object in JavaScript is any unordered collection of key-value pairs. If its not a primitive (undefined, null, boolean, number or string) its an object. If we want to add an property/method in Foo, that will be available to all the objects, we should use “prototype”. say we want to add a property named “c” to the Fooclass then we will write ….. Foo.prototype.c = 100; 5 Sentrana The Amazing JavaScript Function(Cont…)

11. Constructors provide a convenient cross-browser mechanism for assigning a common prototype on instance creation.(Don’t get confused, I’m going to uncover all the mysteries about prototype in the upcoming sections.) 6 Sentrana What is a Prototype ?

13. We can assign a function to a class in the same manner as we assign a property in it using the prototype. function Foo() { this.x = 1; } Foo.prototype.AddX = function(y) // Define Method { this.x += y; } obj = new Foo; obj.AddX(5); // Call Method 8 Sentrana Prototype in Action (Cont..)

14. Please do not think this slide is incoherent. For better understanding about OO nature of JS I would like to introduce you with those. Consider the code snippet – var x = 10;function f(){ alert(this.x); // Outputs 10.}f(); Here, f() uses the this keyword to reference x, but notice we don't invoke the function through an instance of an object. So what object does thisreference? this will reference the global object. The global object is where we defined the variable x. Now consider the next code snippet : var x = 10; function f() { this.x = 50; alert(this.x ); // Outputs 50 , because this refer to the current object . Here the current object is a. } var a = f(); 9 Sentrana this & call()

15. Using the call() are method we can use to assign the this pointer for the duration of a method invocation. As an example, here is how we could use the call() method: var x = 10;var o = { x: 15 };function f(){ alert(this.x);}f(); // Outputs 10f.call(o); // Outputs 15 The first invocation of f()will display the value of 10, because this references the global object. The second invocation (via the call method) however, will display the value 15. 15 is the value of the x property inside object o. The call()method invokes the function and uses its first parameter as the this pointer inside the body of the function. In other words - we've told the runtime what object to reference asthiswhile executing inside of functionf(). 10 Sentrana this & call() (Cont..)

18. Consider the code snippet – function A() // Define super class{ this.x = 1;} A.prototype.DoIt = function() // Define Method{ this.x += 1;} B.prototype = new A; // Define sub-classB.prototype.constructor = B;function B(){ A.call(this); // Call super-class constructor this.y = 2;} B.prototype.DoIt = function() // Define Method{ A.prototype.DoIt.call(this); // Call super-class method this.y += 1;} b = new B; document.write((b instanceof A) + ', ' + (b instanceof B) + '<BR/>'); // Outputs true, trueb.DoIt();document.write(b.x + ', ' + b.y); // Outputs 2,3 12 Sentrana Prototype and Inheritence (Cont...)

20. Privileged method: A privileged method is a method having access to private properties, but at the same time publicly exposing itself .You can delete or replace a privileged method, but you cannot alter its contents. I.e. this privileged method returns the value of a private property: function Kid (name) { // Private var idol = "Paris Hilton"; // Privileged this.getIdol = function () { return idol; } } 14 Sentrana Access modifiers (Cont..)

22. After gathering some skills on OO JavaScript I had developed a sample project that covers all the discussed area of this presentation. It is very easy to understand and may be very helpful for understanding the features of OOP JavaScript. Download the complete project from here - http://hotfile.com/dl/130755893/b52f2ef/OOPJS.rar.html 16 Sentrana My Experience and a Sample Project

23. http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/ http://mckoss.com/jscript/object.htm http://robertnyman.com/2008/10/14/javascript-how-to-get-private-privileged-public-and-static-members-properties-and-methods/ 17 Sentrana I am Gretful to :

24. 18 Sentrana Question & Answers