Object Oriented JavaScript
Upcoming SlideShare
Loading in...5
×
 

Object Oriented JavaScript

on

  • 1,838 views

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 ...

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.

Statistics

Views

Total Views
1,838
Views on SlideShare
1,654
Embed Views
184

Actions

Likes
1
Downloads
25
Comments
1

2 Embeds 184

http://thehelios.wordpress.com 183
http://192.168.6.179 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Object Oriented JavaScript Object Oriented JavaScript Presentation Transcript

    • Munir Hoque
      Object Oriented JavaScript
      • Built-in Object data type is the topmost object in JavaScript hierarchy. Please recall your C# or Java Object .
      • Youcan simply create an object as follow and assign properties as many at any time to the Object.
      var x = {};
      x.a = 15;
      • Let us consider an example :
      obj = new Object; obj.x = 1;obj.y = 2;
      This is the scenario of the newly created
      Object.
      2
      Sentrana
      The JavaScript Object
    • 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…)
      • A function in JavaScript is considered as a class.
      • When a function is called with the newoperator, the function serves as the constructor for that class.
      • 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
    • 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…)
      • A prototype is an object from which other objects inherit properties and methods.
      • Every object has a prototype by default. Since prototypes are themselves objects, every
      prototype has a prototype too. (There is only one exception, the default object prototype at the top of
      every prototype chain. More on prototype chains later).
      • Each object is associated with a prototype which comes from the constructor function from which it is created.
      • 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 ?
      • When evaluating an expression to retrieve a property, JavaScript first looks to see if the property is defined directly in the object. If it is not, it then looks at the object's prototype to see if the property is defined there. This continues up the prototype chain until reaching the root prototype.
      Please consider the code snippet –
      function A()
      {
      this.inA = 2;;
      }
      A.prototype.inAProto = 3;
      var o = new A();
      alert(o.inAProto); // Outputs 3
      Here ,when we access the “inAProto” property , JavaScript first looks “inAProto” in “A”. When it does not found “inAProto” in “A” it make a search to the “prototype” and get the property as expected.
      7
      Sentrana
      Prototype in Action
      o
      inA
      2
      A.prototype
      constructor
      A
      3
      inAProto
    • 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..)
    • 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()
    • 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..)
      • There is an explicit concept of the class hierarchy. i.e. Every class can have a super class from which it inherits properties and methods. Any class can be extended, or sub-classed so the resulting subclass can inherit its parent's behavior. As we have seen, JavaScript supports prototype inheritance instead of class based. It's possible for inheritance to happen other ways.
      • The standard paradigm, is to use the prototype chain to implement the inheritance of methods from a super class. Any methods defined on the sub-class will supersede those defined on the super-class.
      Say we have a function named “A“. Now we want to create a subclass of “A“ named “B”. To do this we have to add B” ‘s prototype with “A“ ‘s object ,
      B.prototype = new A();
      • Something to keep in mind is that each time a sub-class is defined, we explicitly call the constructor of the super-class in order to insert it into our prototype chain. So it is important to ensure that no undesirable side-effects will occur when this call is made. Conversely, if the super-class constructor should be called for each instance of every sub-class, code must be explicitly added to the sub-class's constructor to make this call .
      A.call(this,[argumentList……….])
      11
      Sentrana
      Prototype and Inheritence
    • 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...)
    • Public Member Variables & Functions :
      • Public functions and variables are available to access on an instance of a class. We can create public member variables and functions using “this” keyword –
      function Kid (name)
      {// Public
      this.name = name;
      this.getName = function () { return this.name; };
      }
      Private Member Variables :
      • As we learned JavaScript scope, by declaring a variable within a function, it is only available from within there. Private member functions and variables are hidden to outside code. Only public functions can access them. We can create a public variable /method by using the var keyword inside the constructor function.
      function Kid (name)
      { // Private
      var idol = "Paris Hilton";
      }
      13
      Sentrana
      Access modifiers
    • 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..)
    • static property:
      • A static member is shared by all instances of the class as well as the class itself (i.e. the Kid object), but it is only stored in one place. This means that its value is not inherited down to the object’s instances:
      Kid (name)
      {
      //Static property
      Kid.town = "South Park";
      }
      15
      Sentrana
      Access modifiers (Cont..)
    • 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
    • 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 :
    • 18
      Sentrana
      Question & Answers