Advanced презентация

Содержание

‘this’ Closure Prototype Module pattern Agenda

Слайд 1Advanced
Presented by
Humayun Kayesh

Слайд 2

Слайд 3‘this’
Closure
Prototype
Module pattern
Agenda

Слайд 4‘this’

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

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

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

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

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

Слайд 10Closure

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

Слайд 12Example


Слайд 13Example


Слайд 14Practical example

Слайд 15Prototype

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

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

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

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

Слайд 20Extending Native Objects
var keywords = [
"landscape", "tranquil", "green", "vegetation"
]

;
console.log(keywords);

Array.prototype.clear=function(){ this.length=0; }
keywords.clear();

console.log(keywords);

Слайд 21JavaScript Module Pattern

Слайд 22Creating a module
(function () { // code... })();


It declares a function,

which then calls itself immediately.

Слайд 23Basic Module
var Module = (function () {

var privateMethod =

function () {
// do something
};

})();

Слайд 24Public Method
var Module = (function () {

return {

publicMethod: function () {
// code
}
};

})();

Module.publicMethod();

Слайд 25Anonymous Object Literal Return
var Module = (function () {

var

privateMethod = function () {};

return {
publicMethodOne: function () { // I can call `privateMethod()` you know... },
publicMethodtwo: function () { //Code… },
publicMethodThree: function () { // Code… }
};

})();

Слайд 26Revealing Module Pattern
var Module = (function () {

var privateMethod

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

})();

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

Слайд 28Advantages
Cleaner approach for developers
Supports private data
Less clutter in the global namespace
Localization

of functions and variables through closures

Похожие презентации

Антоніо Гауді 288
Аппаратное и программное обеспечение ЭВМ и сетей 333
Украинская блогосфера 260
Базар Жырау Оңдасұлы 583
Моя первая школьная практикакак это было… 232
Оформление выпускной квалификационной работы 217

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика