Advanced oop
This presentation is the property of its rightful owner.
Sponsored Links
1 / 46

Advanced OOP PowerPoint PPT Presentation


  • 29 Views
  • Uploaded on
  • Presentation posted in: General

Advanced OOP. The many faces of OOP in JavaScript. Doncho Minkov. Telerik Software Academy. http://academy.telerik.com. Technical Trainer. http://minkov.it. Table of Contents. OOP in JavaScript Prototype and prototype chain Inheritance Classical and Prototypal

Download Presentation

Advanced OOP

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Advanced oop

Advanced OOP

The many faces of OOP in JavaScript

Doncho Minkov

Telerik Software Academy

http://academy.telerik.com

Technical Trainer

http://minkov.it


Table of contents

Table of Contents

  • OOP in JavaScript

    • Prototype and prototype chain

  • Inheritance

    • Classical and Prototypal

  • OOP Patterns in JavaScript


Object prototypes

Object Prototypes


Oop in javascript

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, "&amp;").replace(/</g,"&lt;")

.replace(/>/g, "&gt;");

}


Extending the prototype

Extending the Prototype

Live Demo


The prototype chain

The Prototype Chain


The prototype chain1

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 javascript1

OOP in JavaScript


Oop in javascript2

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

Classical OOP


Classical oop1

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


Classical oop 2

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 oop2

Classical OOP

Live Demo


Inheritance in classical oop

Inheritance in Classical OOP


Inheritance in classical oop1

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 type

function Person(fname, lname) {}

function Student(fname, lname, grade) {}

Student.prototype = new Person();

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

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


Inheritance in classical oop2

Inheritance in Classical OOP

Live Demo


Access modifiers in classical inheritance

Access Modifiers in Classical Inheritance


Access modifiers

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 this

function Person(fname, lname){

var fullname = fname + " " + lname;

this.sayName = function() { return fullname; };

}


Duplicated functions

Duplicated Functions


Duplicated functions1

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

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 duplications

Functions Duplications

Live Demo


All public data

All Public Data


All public data1

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 data2

All Public Data

Live Demo


A better way to implement classical oop

A Better Way to Implement Classical OOP


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


Class create

Class.create()

  • Unfortunately Class.create() is not implemented in JavaScript

    • Needs to be implemented by developers

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

Attach the properties

Create a default constructor


Class create1

Class.create

Live Demo


Functional inheritance

Functional Inheritance


Functional inheritance1

Functional Inheritance

  • Functional inheritance can be achieved by extending the prototype of the Function object

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

Functional Inheritance

Live Demo


Prototypal oop

Prototypal OOP


Prototypal oop1

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


Prototypal oop2

Prototypal OOP

  • Create an object template

    • Then clone it into another object

var Person = {

init: function(){ … },

fullname: function(){ … }

}

var pesho = Object.create(Person);

pesho.init("Peter", "Petrov", "PeshoVodkata");

var joro = Object.create(Person);

joro.init("Georgi", "Georgiev", "Joro Mentata");

Create object template

Call init to initialize the object

  • Objects create objects


Object create

Object.create()

  • Object.create() is not supported everywhere

    • Must be shimmed

if(!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 shim

Object.create() Shim

Live Demo


Prototypal inheritance

Prototypal Inheritance


Prototypal inheritance1

Prototypal Inheritance

  • Prototypal inheritance is not like classical inheritance

    • With prototypal inheritance all instances are created from common JavaScript object

      • i.e. instanceofdoes not work

  • The inheritance is much like the Object.create(), but adds more properties to the object

var Person = {…}

Var Student = Person.extend({…});

  • Extend the Person object and add Student specific functionality


Prototypal inheritance 2

Prototypal Inheritance (2)

  • The implementation of the object.extend() is custom and must be implemented manually

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

Add the derived object properties

Keep a reference to the super object


Prototypal inheritance2

Prototypal Inheritance

Live Demo


Advanced oop1

Advanced OOP


Homework

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


Homework 2

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 (класен ръководител)

  • Implement the schools repository using Prototypal OOP

  • Implement the schools repository using Classical OOP


Homework 3

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


Homework 4

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


  • Login