JAVA SCRIPT - Inheriting an Object’s Functionality

 Inheriting an Object’s Functionality

Problem

When creating a new object type, you want to inherit the functionality of an existing JavaScript object.

Solution

Use Object.create() to implement the inheritance:

function origObject() {
 this.val1 = 'a';
 this.val2 = 'b';
}
origObject.prototype.returnVal1 = function() {
 return this.val1;
};
origObject.prototype.returnVal2 = function() {
 return this.val2;
};
function newObject() {
 this.val3 = 'c';
 origObject.call(this);
}
newObject.prototype = Object.create(origObject.prototype);
newObject.prototype.constructor=newObject;
newObject.prototype.getValues = function() {
 return this.val1 + " " + this.val2 + " "+ this.val3;
};
var obj = new newObject();
console.log(obj instanceof newObject); // true
console.log(obj instanceof origObject); // true
console.log(obj.getValues()); "a b c"

The Object.create() method introduced with ECMAScript 5 provides classical in‐ heritance in JavaScript. The first parameter is the object that serves as prototype for the newly created object, and the second optional parameter is a set of properties defined for the object, and equivalent to the second argument in Object.defineProperties(). In the solution for this recipe, the prototype for the original object is passed in the Object.create() call, assigned to the new object’s own prototype. The new object’s constructor property is set to the new object’s constructor function.

The new object’s prototype is then extended with a new method, getValues(), which returns a string consisting of concatenated properties from both objects. Note the use of instanceof demonstrating how both the old and new object prototypes are in the new object’s prototype chain. In the constructor function for the new object, you need to use call() to chain the constructors for both objects. If you want to pass the argument list between the two objects, use apply() instead 

Demonstrating classical inheritance in JavaScript with Object.create

function Book (title, author) {
 this.getTitle=function() {
 return "Title: " + title;
 };
 this.getAuthor=function() {
 return "Author: " + author;
 };
}
function TechBook (title, author, category) {
 this.getCategory = function() {
 return "Technical Category: " + category;
 };
 this.getBook=function() {
 return this.getTitle() + " " + author + " " + this.getCategory();
 };
 Book.apply(this, arguments);
}
TechBook.prototype = Object.create(Book.prototype);
TechBook.prototype.constructor = TechBook;
// get all values
var newBook = new TechBook("The JavaScript Cookbook",
 "Shelley Powers", "Programming");
console.log(newBook.getBook());
// now, individually
console.log(newBook.getTitle());
console.log(newBook.getAuthor());
console.log(newBook.getCategory());
In jsBin, the output for the application is:
"Title: The JavaScript Cookbook Shelley Powers Technical Category: Programming"
"Title: The JavaScript Cookbook"
"Author: Shelley Powers"
"Technical Category: Programming"