'

Advanced

Понравилась презентация – покажи это...





Слайд 0

Advanced Presented by Humayun Kayesh


Слайд 1


Слайд 2

‘this’ Closure Prototype Module pattern Agenda


Слайд 3

‘this’


Слайд 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


Слайд 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...


Слайд 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?


Слайд 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


Слайд 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


Слайд 9

Closure


Слайд 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


Слайд 11

Example


Слайд 12

Example


Слайд 13

Practical example


Слайд 14

Prototype


Слайд 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


Слайд 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();


Слайд 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...


Слайд 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();


Слайд 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);


Слайд 20

JavaScript Module Pattern


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 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… } }; })();


Слайд 25

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


Слайд 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 || {});


Слайд 27

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


Слайд 28

Q&A…


×

HTML:





Ссылка: