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

Advanced JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Advanced JavaScript

More from Nascenia IT

Recently uploaded

Advanced JavaScript

Editor's Notes