1 / 22

Inheritance with Classical OOP

Explore the principles of classical inheritance in JavaScript, comparing it with traditions in languages like C# and Java. This guide covers the prototype chain, calling parent methods, and using inheritance effectively with practical examples. Learn how to set up a simple inheritance structure using John Resig's approach and understand object-oriented programming (OOP) frameworks in JavaScript. Whether you're extending functionality or implementing design patterns, this resource is invaluable for developers looking to deepen their understanding of OOP in JavaScript.

cyma
Télécharger la présentation

Inheritance with Classical 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. Inheritance with Classical OOP In JavaScript Learning & Development http://academy.telerik.com Telerik Software Academy

  2. Table of Contents • Implementing classical inheritance • The prototype chain • Using parent methods • OOP frameworks • John Resig simple inheritance

  3. Inheritance in Classical OOP Like in C#, Java or C++

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

  5. Inheritance in Classical OOP Live Demo

  6. The Prototype Chain The way to search properties in JavaScript

  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. Calling Parent Methods Use some of the power of OOP

  9. Calling Parent Methods • JavaScript has no direct way of calling its parent methods • Function constructors actually does not who or what is their parent • Calling parent methods is done using call and apply

  10. Calling Parent Methods: Example • Having Shape: • Inheriting it with Rect var Shape = (function () { function Shape(x, y) { //initialize the shape } Shape.prototype= { serialize: function () { //serialize the shape //return the serialized } }; return Shape; }()); varRect = (function () { function Rect(x, y, width, height) { Shape.call(this, x, y); //init the Rect } Rect.prototype= new Shape(); Rect.prototype.serialize=function (){ Shape.prototype .serialize .call(this); //add Rect specific serialization //return the serialized; }; return Rect; }());

  11. Calling Parent Methods: Example • Having Shape: • Inheriting it with Rect var Shape = (function () { function Shape(x, y) { //initialize the shape } Shape.prototype= { serialize: function () { //serialize the shape //return the serialized } }; return Shape; }()); varRect = (function () { function Rect(x, y, width, height) { Shape.call(this, x, y); //init the Rect } Rect.prototype= new Shape(); Rect.prototype.serialize=function (){ Shape.prototype .serialize .call(this); //add Rect specific serialization //return the serialized; }; return Rect; }()); Call parent constructor

  12. Calling Parent Methods: Example • Having Shape: • Inheriting it with Rect var Shape = (function () { function Shape(x, y) { //initialize the shape } Shape.prototype= { serialize: function () { //serialize the shape //return the serialized } }; return Shape; }()); varRect = (function () { function Rect(x, y, width, height) { Shape.call(this, x, y); //init the Rect } Rect.prototype= new Shape(); Rect.prototype.serialize=function (){ Shape.prototype .serialize .call(this); //add Rect specific serialization //return the serialized; }; return Rect; }()); Call parent constructor Call parent method

  13. Calling Parent Methods Live Demo

  14. OOP Frameworks

  15. OOP Frameworks • OOP is a primary design paradigm in most programming languages • Yet, OOP in JavaScript is not that perfect • And that is why every framework has its own way of doing OOP • YUI, Prototype.js, Backbone.js, etc… • If none of these frameworks is used, a simple implementation by John Resig is intruded

  16. John Resig Simple Inheritance • How to use it? • Copy the code from: http://tinyurl.com/simple-inheritance • Create "class" with: • Inherit it with: varShape = Class.extend({ init: function(x, y){ this._x = x; this._y = y; }, serialize: function(){ return { x: this._x, y: this._y }; } }); varRect = Shape.extend({ init: function(x, y, w, h){ this._super(x, y); this._width = w; this._height = h; }, serialize: function(){ var res = this._super(); res.width = this._width; res.height = this._height; return res; } });

  17. John Resig Simple Inheritance • How to use it? • Copy the code from: http://tinyurl.com/simple-inheritance • Create "class" with: • Inherit it with: varShape = Class.extend({ init: function(x, y){ this._x = x; this._y = y; }, serialize: function(){ return { x: this._x, y: this._y }; } }); varRect = Shape.extend({ init: function(x, y, w, h){ this._super(x, y); this._width = w; this._height = h; }, serialize: function(){ var res = this._super(); res.width = this._width; res.height = this._height; return res; } }); Constructor

  18. John Resig Simple Inheritance • How to use it? • Copy the code from: http://tinyurl.com/simple-inheritance • Create "class" with: • Inherit it with: varShape = Class.extend({ init: function(x, y){ this._x = x; this._y = y; }, serialize: function(){ return { x: this._x, y: this._y }; } }); varRect = Shape.extend({ init: function(x, y, w, h){ this._super(x, y); this._width = w; this._height = h; }, serialize: function(){ var res = this._super(); res.width = this._width; res.height = this._height; return res; } }); Constructor Method

  19. John Resig Simple Inheritance • How to use it? • Copy the code from: http://tinyurl.com/simple-inheritance • Create "class" with: • Inherit it with: varShape = Class.extend({ init: function(x, y){ this._x = x; this._y = y; }, serialize: function(){ return { x: this._x, y: this._y }; } }); varRect = Shape.extend({ init: function(x, y, w, h){ this._super(x, y); this._width = w; this._height = h; }, serialize: function(){ var res = this._super(); res.width = this._width; res.height = this._height; return res; } }); Constructor Parent constructor Method

  20. John Resig Simple Inheritance • How to use it? • Copy the code from: http://tinyurl.com/simple-inheritance • Create "class" with: • Inherit it with: varShape = Class.extend({ init: function(x, y){ this._x = x; this._y = y; }, serialize: function(){ return { x: this._x, y: this._y }; } }); varRect = Shape.extend({ init: function(x, y, w, h){ this._super(x, y); this._width = w; this._height = h; }, serialize: function(){ var res = this._super(); res.width = this._width; res.height = this._height; return res; } }); Constructor Parent constructor Parent serialize method Method

  21. John Resig Simple Inheritance Live Demo

  22. Inheritance in Classical OOP

More Related