All the examples so far in this chapter assume that you create your objects with constructor functions, and you want objects created with one constructor to inherit properties that come from another constructor. However, you can also create objects without the help of a constructor function, just using the object literal, and this is, in fact, less typing. So, how about inheriting those?

In Java or PHP, you define classes and have them inherit from other classes. That's why you'll see the term classical, because the OO functionality comes from the use of classes. In JavaScript, there are no classes, so programmers that come from a classical background resort to constructor functions, because constructors are the closest to what they are used to. In addition, JavaScript provides the new operator, which can further suggest that JavaScript is like Java. The truth is that, in the end, it all comes down to objects. The first example in this chapter used this syntax:

    Child.prototype = new Parent(); 

Here, the Child constructor (or class, if you will) inherits from Parent. However, this is done by creating an object using new Parent() and inheriting from it. That's why this is also referred to as a pseudo-classical inheritance pattern, because it resembles classical inheritance, although it isn't (no classes are involved).

So, why not get rid of the middleman (the constructor/class) and just have objects inherit from objects? In extend2(), the properties of the parent prototype object were copied as properties of the child prototype object. The two prototypes are, in essence, just objects. Forgetting about prototypes and constructor functions, you can simply take an object and copy all of its properties into another object.

You already know that objects can start as a blank canvas without any own properties, using var o = {};, and then get properties later. However, instead of starting fresh, you can start by copying all of the properties of an existing object. Here's a function that does exactly this: it takes an object and returns a new copy of it:

    function extendCopy(p) { 
      var c = {}; 
      for (var i in p) { 
        c[i] = p[i]; 
      } 
      c.uber = p; 
      return c; 
    } 

Simply copying all the properties is a straightforward pattern, and it's widely used. Let's see this function in action. You start by having a base object:

    var shape = { 
    name: 'Shape', 
    toString: function () { 
    return this.name; 
    } 
    }; 

In order to create a new object that builds upon the old one, you can call the extendCopy() function, which returns a new object. Then, you can augment the new object with additional functionality:

    var twoDee = extendCopy(shape); 
    twoDee.name = '2D shape'; 
    twoDee.toString = function () { 
    return this.uber.toString() + ', ' + this.name; 
    }; 

Here is a triangle object that inherits the 2D shape object:

    var triangle = extendCopy(twoDee); 
    triangle.name = 'Triangle'; 
    triangle.getArea = function () { 
    return this.side * this.height / 2; 
    }; 

Using the triangle, for example:

    >triangle.side = 5; 
    >triangle.height = 10; 
    >triangle.getArea(); 
    25 
    >triangle.toString(); 
    "Shape, 2D shape, Triangle" 

A possible drawback of this method is the somewhat verbose way of initializing the new triangle object, where you manually set values for side and height, as opposed to passing them as values to a constructor. However, this is easily resolved by having a function, for example, called init() (or __construct() if you come from PHP) that acts as a constructor and accepts initialization parameters. Alternatively, have extendCopy() accept two parameters, an object to inherit from and another object literal of properties to add to the copy before it's returned. In other words, just merge two objects.