Embed Size (px)
Citation preview
Advanced
Presented by
Humayun Kayesh
● ‘this’
● Closure
● Prototype
● Module pattern
Agenda
‘this’
‘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
var myObject = {
myProperty:'I can see the light',
myMethod:function() {
console.log(this.myProperty); //logs 'I can see the light'
var helperFunction = function() {
console.log(this.myProperty); //logs 'Undefined'
}();
}
}
myObject.myMethod(); // invoke myMethod
‘this’ Inside Nested Functions
Closure
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
Example
Example
Practical example
Prototype
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 ExamplePictureProtoType = {
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);
JavaScript Module Pattern
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
var Module = (function () {
return {
publicMethod: function () {
// code
}
};
})();
Module.publicMethod();
Anonymous Object Literal Return
var Module = (function () {
var privateMethod = function () {};
return {
publicMethodOne: function () { // I can call `privateMethod()` you know... },
publicMethodtwo: function () { //Code… },
publicMethodThree: function () { // Code… }
};
})();
Revealing Module Pattern
var Module = (function () {
var privateMethod = function () {
// private
};
var someMethod = function () {
// public
};
var anotherMethod = function () {
// public
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
})();
Extending A Module
var Module = (function () {
var privateMethod = function () {
// 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
Q&A…
