Advanced OOP - PowerPoint PPT Presentation

Advanced oop
1 / 46

  • Uploaded on
  • Presentation posted in: General

Advanced OOP. The many faces of OOP in JavaScript. Doncho Minkov. Telerik Software Academy. Technical Trainer. Table of Contents. OOP in JavaScript Prototype and prototype chain Inheritance Classical and Prototypal

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

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

Technical Trainer

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"


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 = {


function(){ return this.fname + " " + this.lname; },


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


  • 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


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


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() is not supported everywhere

    • Must be shimmed


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



  • 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