1 / 46

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. OOP in JavaScript Prototype and prototype chain Inheritance Classical and Prototypal

donnel
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Advanced OOP The many faces of OOP in JavaScript Doncho Minkov Telerik Software Academy http://academy.telerik.com Technical Trainer http://minkov.it

  2. Table of Contents • OOP in JavaScript • Prototype and prototype chain • Inheritance • Classical and Prototypal • OOP Patterns in JavaScript

  3. Object Prototypes

  4. 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;"); }

  5. Extending the Prototype Live Demo

  6. The Prototype Chain

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

  8. OOP in JavaScript

  9. 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

  10. Classical OOP

  11. 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

  12. 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());

  13. Classical OOP Live Demo

  14. Inheritance in Classical OOP

  15. 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);

  16. Inheritance in Classical OOP Live Demo

  17. Access Modifiers in Classical Inheritance

  18. 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; }; }

  19. Duplicated Functions

  20. 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()

  21. 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

  22. Functions Duplications Live Demo

  23. All Public Data

  24. 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; } }

  25. All Public Data Live Demo

  26. A Better Way to Implement Classical OOP

  27. 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

  28. 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

  29. Class.create Live Demo

  30. Functional Inheritance

  31. 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);

  32. Functional Inheritance Live Demo

  33. Prototypal OOP

  34. 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

  35. 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

  36. 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

  37. Object.create() Shim Live Demo

  38. Prototypal Inheritance

  39. 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

  40. 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

  41. Prototypal Inheritance Live Demo

  42. Advanced OOP

  43. 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

  44. 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

  45. 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

  46. 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()

More Related