Elementary OO Javascript and prototyping I

Considering the apparent fact that everything in Javascript is an object to be another day's story we will learn what is object oriented javascript.
a) Object declaration.

var foo={};
function Foo(){};


The first is a literal object and the second is a constructor object.

The literal object is used when the same object is used throughout and any changes to the object will be carried forward.

The constructor object is used when multiple instances of the object are required with some initial work is already done during object declaration.
b) Method and Property declaration.


var foo={
    bar : "foobar",
    getName : function(){
        return this.bar;
    }
};
alert(foo.getName());
// will display -  foobar
function Foo(){
    this.bar = "foobar";
    this.getName = function(){
        return this.bar;
    }
}
var foo = new Foo();
alert(foo.getName()); 
// will display - foobar


N.B.: Changing properties and methods of foo will not change it in Foo
c) this confuses me

function foo(){
    alert(this);
}
foo(); 
// will display -  window
function foo(){
    alert(this);
}
var foobar = new foo(); 
// will display -  object



1) this of constructor object refers to parent object(In this case window)

2) this of constructor object refers to self

var foo = {
    bar : function(){
        alert(this.foobar);
    },
    foobar : "foobars"
}
foo.bar(); 
will display - foobars
var foo = {
    bar : function foofoo(){
        alert(this.foobar);
        this.fooBarFunc();
        this.fooFunc = function(){
            this.fooBarFunc();
        };
    },
    foobar : "foobars",
    fooBarFunc : function(){
        alert(this.foobar);
    }
}
foo.bar(); 
will display - foobars(twice)



1) this of constructor object refers to literal object(In this case foo)

2) this of constructor object refers to literal object(In this case foo)

var foo = {
    bar : function foofoo(){
        alert(this.foobar); // this of constructor object
 refers to self
        this.fooFunc = function(){
            this.fooBarFunc();
        };
    },
    foobar : "foobars",
    fooBarFunc : function(){
        alert(this.foobar);
    }
}
var fooo = new foo.bar(); // will display - undefined
fooo.fooFunc(); // will not execute because of exception


N.B.:  1. In a browser - this references the window object

          2. Inside a literal object - this will refer to the object itself.

          3. Inside a function - this will refer to the window object.

          4. Inside a method that is inside an object - this will refer to the object.

          5. Inside an object that is inside an object - this will refer to the child-object and not the parent object.
NEXT POST 

Comments

Popular posts from this blog

Designing a hybrid mobile application with Ionic Framework

The last candle

A Rudderless Dance