Advanced OOP

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезанияASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET

курсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGapfree C# book, безплатна книга C#, книга Java, книга C# Дончо Минков - сайт за програмиране

Николай Костов - блог за програмиранеC# курс, програмиране, безплатно

Advanced OOPThe many faces of OOP in JavaScript

Doncho Minkov

Telerik Software Academyhttp://academy.telerik.com

Technical Trainerhttp://minkov.it

Insert a Picture Here

http://academy.telerik.com/

http://minkov.it/

http://forums.academy.telerik.com/

http://kursove-uroci-knigi-obuchenie-programirane-web-design-csharp.info/

http://www.telerik-kids.com/

http://seocourse.telerik.com/

http://html5course.telerik.com/

http://schoolacademy.telerik.com/

http://mvccourse.telerik.com/

http://clouddevcourse.telerik.com/

http://www.bgcoder.com/

http://www.nakov.com/

http://codecourse.telerik.com/

http://algoacademy.telerik.com/

http://aspnetcourse.telerik.com/


http://mobiledevcourse.telerik.com/

http://www.introprogramming.info/

http://www.minkov.it/

http://www.nikolay.it/

http://csharpfundamentals.telerik.com/












Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Table of Contents

OOP in JavaScript Prototype and prototype chain

Inheritance Classical and Prototypal

OOP Patterns in JavaScript
































Object Prototypes































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно OOP in JavaScript

JavaScript is prototype-oriented language Every object has a prototype

It can be an empty object A prototype contains properties

that are shared across all objects with this prototype

The prototype can be used to extend the original functionality Adding a method to String for

escaping

String.prototype.htmlEscape = function() { return this.replace(/&/g, "&").replace(/</g,"<") .replace(/>/g, ">");}
































Extending the PrototypeLive Demo
































The Prototype Chain































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно The Prototype Chain

Objects in JavaScript can have only a single prototype Their prototype also has a

prototype, etc… This is called the prototype chain

When a property is called on an object This object is searched for the

property If the object does not contain such

property, its prototype is checked for the property, etc…

If a null prototype is reached, the result is undefined
































OOP in JavaScript































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно OOP in JavaScript

JavaScript is a highly-expressional language It can be used to support all kinds

of things JavaScript has two common approaches to create an OOP design Classical and Prototypal

Classical OOP is intended to ease the learning curve for C#, Java and C/C++ developers

Prototypal OOP uses the expression power of JavaScript to create objects from objects
































Classical OOP































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Classical OOP

Classical OOP aims to the way of OOP in C-like languages Like C/C++, Java, C# and others Also called Functional OOP

We define a function, that is used as a constructor and invoked with new These functions are called function

constructors They create an object with the

given specifics































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Classical OOP (2)

Almost every function can be invoked with new This creates an object scope this contains the instance of the

object that is initialized with the function constructor

function Person(fname, lname){ this.introduce = function(){ return "Hello! My name is " + fname + " " + lname; }}var joro = new Person("Joro", "Mentata");var pesho = new Person("Pesho", "Vodkata"); console.log(joro.introduce()); //logs "Hello! My name is Joro Mentata"console.log(pesho.introduce());
































Classical OOPLive Demo
































Inheritance in Classical OOP
































Inheritance in Classical OOP Inheritance is a way to extend the

functionality of an object, into another object Like Student inherits Person Person inherits Mammal, etc…

In JavaScript Inheritance is achieved by setting the prototype of the derived type to an instance of the super typefunction Person(fname, lname) {}function Student(fname, lname, grade) {}Student.prototype = new Person();

var student = new Student("Kiro", "Troikata", 7);

Now all instances of type Student are also of type Person and have Person functionality
































Inheritance in Classical OOPLive Demo
































Access Modifiers in Classical Inheritance































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Access Modifiers

Classical OOP supports data hiding Some of the state and behavior of

an object can be hidden to outside objects

Done with closures To make an object hidden (private),

just initialize it inside the function constructor (with var)

To make an object visible(public) to outside objects, attach it to thisfunction Person(fname, lname){ var fullname = fname + " " + lname; this.sayName = function() { return fullname; };}
































Duplicated Functions































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Duplicated Functions

Support for hidden (private) data is costly If a function should have an access

to a private object, the function and the object should be declared in the same scope In the function constructor

Functions in function constructors are slow Each time an object is instantiated

with a function constructor, all member functions are created anew If we have N Persons, there will be N

identical functions fullname()
































Duplicated Functions (2)

Coping of the same function many times gets both runtime and memory Imagine a function constructor with

15 different public functions And 100 objects that are created

with this constructor These are 1500 functions, when they

can be just 15 The solution?

Use private data only when it is really necessary
































Functions DuplicationsLive Demo
































All Public Data































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно All Public Data

The solution to duplicated member functions is to make all the data public And then attach the methods to the

prototype of the function constructor

That way all instances of this function constructor share the same prototype

function Person(fname, lname){ this.fname = fname; this.lname = lname;}Person.prototype = { fullname: function(){ return this.fname + " " + this.lname; }, changeFName: function(fname){ this.fname = fname || this.fname; }}
































All Public DataLive Demo
































A Better Way to Implement Classical

OOP
































Better Way to Implement Classical

OOP Yet, this OOP is kind of strange The constructor and methods are

separate We can do something like:var Person = Class.create({ init: function(fname, lname){ this.fname = fname; this.lname = lname; }, fullname: function(){ return this.fname + " " + this.lname; }, changeFName: function(fname){ this.fname = fname || this.fname; }});

The constructor function

Member function

Member function































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Class.create()

Unfortunately Class.create() is not implemented in JavaScript Needs to be implemented by

developersvar Class.create = function(properties) { var theClass = function() { this.init.apply(this, arguments); } theClass.prototype = {}; for (var prop in properties) { theClass.prototype[prop] = properties[prop]; } if (!theClass.prototype.init) { theClass.prototype.init = function() {} } return theClass;}

Call init in the

constructorAttach the properties

Create a default

constructor
































Class.createLive Demo
































Functional Inheritance































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Functional Inheritance

Functional inheritance can be achieved by extending the prototype of the Function objectFunction.prototype.inherit = function(parent) { var oldPrototype = this.prototype; var prototype = new parent(); this.prototype = Object.create(prototype); this.prototype._super = prototype; for (var prop in oldPrototype) { this.prototype[prop] = oldPrototype[prop]; }}

Now we can inherit this way:var Person = Class.create({…});var Student = Class.create({…});Student.inherit(Person);
































Functional InheritanceLive Demo
































Prototypal OOP































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Prototypal OOP

Prototypal OOP uses the prototype nature of JavaScript to produce objects Objects are created from objects,

instead of created from functions In Prototypal OOP all properties of the objects are public































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Prototypal OOP

Create an object template Then clone it into another objectvar Person = { init: function(){ … }, fullname: function(){ … }}

var pesho = Object.create(Person);pesho.init("Peter", "Petrov", "Pesho Vodkata");var joro = Object.create(Person);joro.init("Georgi", "Georgiev", "Joro Mentata");

Objects create objects

Create object

template

Call init to initialize the

object































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Object.create()

Object.create() is not supported everywhere Must be shimmedif(!Object.create){ Object.create = function(obj){ function f(){}; f.prototype = obj; return new f(); }}

Create an empty function constructor Set its prototype to the object Create and return an instance of

the function constructor
































Object.create() ShimLive Demo
































Prototypal Inheritance































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Prototypal Inheritance

Prototypal inheritance is not like classical inheritance With prototypal inheritance all

instances are created from common JavaScript object i.e. instanceof does not work

The inheritance is much like the Object.create(), but adds more properties to the objectvar Person = {…}Var Student = Person.extend({…});

Extend the Person object and add Student specific functionality
































Prototypal Inheritance (2)

The implementation of the object.extend() is custom and must be implemented manuallyObject.prototype.extend = function(properties) { function f() {}; f.prototype = Object.create(this); for (var prop in properties) { f.prototype[prop] = properties[prop]; } f.prototype._super = this; return new f();}

Set the prototype to this of the extended

objectAdd the derived object

propertiesKeep a

reference to the super

object
































Prototypal InheritanceLive Demo
































?

?? ? ?

??? ?

?

? ?

??

?

?

? ?

Questions?

Advanced OOP


















































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Homework

Implement a repository to keep students and teachers in schools Each school have a name, town and

classes of students Students have firstname, last name, age

and grade Teachers have firstname, last name, age

and speciality Students and Teachers can introduce

themselves by printing all their non-function properties in the format PropertyName: PropertyValue Student introducement - Name: Peter Ivanov,

Age: 13, grade: 7































Николай Костов - блог за програмиранеC# курс, програмиране, безплатно Homework (2)

*Cont: Implement a repository to keep students and teachers in schools Classes have name, capacity of students,

a set of students and a form-teacher (класен ръководител)

1. Implement the schools repository using Prototypal OOP

2. Implement the schools repository using Classical OOP
































3. Implement a image slider control using Prototypal OOP The slider has a set of images and only

one can be enlarged Each image in the image slider has a title

and two urls (thumbnail url and large image url)

When an image from the thumbnails is clicked

The slider must have buttons for prev/next image
































4. Create a favorite sites bar The favorite sites bar should keep a set

of urls and set of folders Folders have a title and set of urls Urls have a title and a url The favorite sites bar should have a

functionality to display urls and folders If an url is clicked, it should be open in

new tab in the browser Use Classical OOP with Class.create()




















Documents

Advanced OOP