Inheritance (JSDP) - Example - Strict Inheritance

Here is the extend function in order to use the example bellow.

function extend(subClass, superClass) {
 var F = function() {};
 F.prototype = superClass.prototype;
 subClass.prototype = new F();
 subClass.prototype.constructor = subClass;
 
 subClass.superClass = superClass.prototype;
 
 if(superClass.prototype.constructor == Object.prototype.constructor) {
  superClass.prototype.constructor = superClass;
 }
 
}

Also please check the Extend blog from Object Oriented JavaScript, it shows different flavors of extend (copy). It's nice to see different input/explanation.


It continues on previous example EditInPlaceField class.

Next, create a class that will use a TEXT AREA instead of a TEXT INPUT. For the most part the
EditInPlaceField and EditInPlaceArea classes are identical, so create one as a subclass of
the other in order to prevent code duplication:

/* EditInPlaceArea class. */

function EditInPlaceArea(id, parent, value) {
  EditInPlaceArea.superclass.constructor.call(this, id, parent, value);
};

extend(EditInPlaceArea, EditInPlaceField);    //extending EditInPlaceField

// Override certain methods.
EditInPlaceArea.prototype.createElements = function(id) {
 this.containerElement = document.createElement('div');
 this.parentElement.appendChild(this.containerElement);
 this.staticElement = document.createElement('p');
 this.containerElement.appendChild(this.staticElement);
 this.staticElement.innerHTML = this.value;
 this.fieldElement = document.createElement('textarea');
 this.fieldElement.value = this.value;
 this.containerElement.appendChild(this.fieldElement);
 this.saveButton = document.createElement('input');
 this.saveButton.type = 'button';
 this.saveButton.value = 'Save';
 this.containerElement.appendChild(this.saveButton);
 this.cancelButton = document.createElement('input');
 this.cancelButton.type = 'button';
 this.cancelButton.value = 'Cancel';
 this.containerElement.appendChild(this.cancelButton);
 this.convertToText();
};

EditInPlaceArea.prototype.convertToEditable = function() {
 this.staticElement.style.display = 'none';
 this.fieldElement.style.display = 'block';
 this.saveButton.style.display = 'inline';
 this.cancelButton.style.display = 'inline';
 this.setValue(this.value);
};

EditInPlaceArea.prototype.convertToText = function() {
 this.fieldElement.style.display = 'none';
 this.saveButton.style.display = 'none';
 this.cancelButton.style.display = 'none';
 this.staticElement.style.display = 'block';
 this.setValue(this.value);
};

You create the subclass using the extend function and then override a few methods to
implement the changes. This new class uses a text area instead of a text input, and a paragraph
tag instead of a span.
Classical inheritance seems like an ideal technique to use in this case. Subclassing the
EditInPlaceField class is trivial, requiring only a few lines of code. Making changes to the class
is as simple as overriding or adding methods on the prototype. We could link the field to another
output by creating another subclass and overriding the save method. Since the changes between
classes are small, strict inheritance like this is ideal.