Prototype.js - SPLessons

Prototype.js Inheritance

Home > Lesson > Chapter 4
SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Prototype.js Inheritance

Prototype.js Inheritance

shape Introduction

This chapter demonstrates about the Prototype.js Inheritance which is used to copy the properties of a parent class to child class and following are the concepts are covered in this chapter.
  • Inheritance
  • Types of Inheritance

Inheritance

shape Description

User can extract the one class properties to another class by using the Inheritance. In which user can extract the parent class property to the child class by using the object.extend as shown in below image. The code below demonstrates to extracting the one class properties to the another class as shown. [code] var Person = Class.create(); Person.prototype = { initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }; var guy = new Person('Miro'); guy.say('hi'); // -> "Miro: hi" var Pirate = Class.create(); // inherit from Person class: Pirate.prototype = Object.extend(new Person(), { // redefine the speak method say: function(message) { return this.name + ': ' + message + ', yarr!'; } }); var john = new Pirate('Long John'); john.say('ahoy matey'); [/code]

Types of Inheritance

shape Description

Generally user can recognize the class-based and prototypal inheritance, the last being particular to JavaScript. Prototypal inheritance, obviously, is an exceptionally helpful feature of the dialect, however is regularly verbose when user really making the objects. Which is the reason as user can emulate class-based inheritance through prototypal inheritance internally which has certain implications. The code below demonstrates For instance, in PHP you can define the initial values for instance variables. [code] <?php class Logger { public $log = array(); function write($message) { $this->log[] = $message; } } $logger = new Logger; $logger->write('foo'); $logger->write('bar'); $logger->log; // -> ['foo', 'bar'] ?> User can try it same as in prototype as shown below code. var Logger = Class.create({ initialize: function() { }, log: [], write: function(message) { this.log.push(message); } }); var logger = new Logger; logger.log; // -> [] logger.write('foo'); logger.write('bar'); logger.log; // -> ['foo', 'bar'] User can also create the another instance of logger which is shown in below code. var logger2 = new Logger; logger2.log; [/code] User can see that, in spite of the fact that user may have expected an empty array it in the new instance, which has an indistinguishable array from the previous logger instance. Actually, all logger objects will have a similar array object since it is copied by reference, not by value. Rather, introduce instances with default values as shown in below code. [code] var Logger = Class.create({ initialize: function() { // this is the right way to do it: this.log = []; }, write: function(message) { this.log.push(message); } }); [/code]

Summary

shape Description

  • Child class extract the properties from parent class.
  • All objects will have the similar arrays.
  • Parent class will have at least one child class.