Advanced


The Presentation inside:

Slide 0

Advanced Presented by Humayun Kayesh


Slide 1


Slide 2

‘this’ Closure Prototype Module pattern Agenda


Slide 3

‘this’


Slide 4

‘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


Slide 5

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


Slide 6

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?


Slide 7

‘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


Slide 8

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


Slide 9

Closure


Slide 10

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: has access to its own scope has access to the outer function’s variables and has access to the global variables


Slide 11

Example


Slide 12

Example


Slide 13

Practical example


Slide 14

Prototype


Slide 15

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


Slide 16

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();


Slide 17

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


Slide 18

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();


Slide 19

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


Slide 20

JavaScript Module Pattern


Slide 21

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


Slide 22

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


Slide 23

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


Slide 24

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… } }; })();


Slide 25

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


Slide 26

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 || {});


Slide 27

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


Slide 28

Q&A…


×

HTML:





Ссылка: