Advanced JavaScript

Advanced
Presented by
Humayun Kayesh

● ‘this’
● Closure
● Prototype
● Module pattern
Agenda

‘this’
● A variable with the value of the object that
invokes the function where this is used.
● Refers to an object; that is, the subject in
context
● Not assigned a value until an object invokes the
function where this is defined

How is the Value of ‘this’ Determined?
The value of ‘this’, is based on the context in which the
function is called at runtime.
Confused?!! Let’s see an example...

var foo = 'foo';
var myObject = {
foo: 'I am myObject.foo'
};
var sayFoo = function() {
console.log(this.foo);
};
// give myObject a sayFoo property and have it point to sayFoo function
myObject.sayFoo = sayFoo;
myObject.sayFoo(); // logs 'I am myObject.foo'
sayFoo(); // logs 'foo'
How is the Value of ‘this’ Determined?

‘this’ Inside Nested Functions
Q: What happens to ‘this’ when it is used inside of a
function that is contained inside of another function?
Ans: ‘this’ loses its way and refers to the head object
(window object in browsers), instead of the object within
which the function is defined.
Solution Hint: Using scope to keep track of function context

Closure
● A Closure is the local variables for a function - kept alive
after the function has returned
● A function having access to the parent scope, even
after the parent function has closed.
● The closure has three scope chains:
o has access to its own scope
o has access to the outer function’s variables and
o has access to the global variables

Prototype
● A prototype is a collection of properties and
methods that can be automatically attached to
an object when it is created
● Every JavaScript function has a prototype
property
● Used primarily for inheritance

Prototype Code Example
PictureProtoType = {
getSize: function(){ return this.height * this.width; },
fetchThumbnail:function(){ /*...*/ }
};
function Picture(name, height, width){
this.name = name;
this.height = height;
this.width = width;
}
Picture.prototype = PictureProtoType;
var picture = new Picture('MyPhoto.jpg', 600, 750);
picture.getSize();

Prototype Lookups are Dynamic
● You can add properties to the prototype of an
object at any time
● The prototype chain lookup will find the new
property as expected
See example...

Prototype Lookups are Dynamic
PictureProtoType = {
getSize: function(){
return this.height * this.width;
},
fetchThumbnail:function(){ /*...*/ }
};
function Picture(name, height, width){
this.name = name;
this.height = height;
this.width = width;
}
Picture.prototype = PictureProtoType;
var picture = new Picture('MyPhoto.jpg', 600,
750);
picture.getSize();
PictureProtoType.getBlackAndWhite = function()
{
/* code... */
}
picture.getBlackAndWhite();

Extending Native Objects
var keywords = [
"landscape", "tranquil", "green", "vegetation"
] ;
console.log(keywords);
Array.prototype.clear=function(){ this.length=0; }
keywords.clear();
console.log(keywords);

Creating a module
(function () {
// code...
})();
It declares a function, which then calls itself
immediately.

Basic Module
var Module = (function () {
var privateMethod = function () {
// do something
};
})();

Public Method
return {
publicMethod: function () {
// code
}
};
})();
Module.publicMethod();

Anonymous Object Literal Return
var privateMethod = function () {};
return {
publicMethodOne: function () { // I can call `privateMethod()` you know... },
publicMethodtwo: function () { //Code… },
publicMethodThree: function () { // Code… }
};
})();

Revealing Module Pattern
// private
};
var someMethod = function () {
// public
};
var anotherMethod = function () {
// public
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
})();

Extending A Module
// private
};
var someMethod = function () {
// public
};
var anotherMethod = function () {
// public
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
})();
var ModuleTwo = (function (Module) {
Module.extension = function () {
// another method!
};
return Module;
})(Module || {});

Advantages
● Cleaner approach for developers
● Supports private data
● Less clutter in the global namespace
● Localization of functions and variables through
closures

Advanced JavaScript

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Advanced JavaScript (20)

More from Nascenia IT (20)

Recently uploaded (20)

Advanced JavaScript

Editor's Notes