<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="/lib/xsl/devedge-1.00/article_en.xsl"?>
<nde:article 
  url="/toolbox/examples/2003/inheritFrom/" 
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:nde="http://devedge.netscape.com/2002/de" 
  xmlns:ent="http://devedge.netscape.com/2003/ent"
  xml:lang="en">

  <nde:header>

    <nde:title>
      inheritFrom - A Simple Method of Inheritance upon Demand
    </nde:title>

    <nde:category>
      Example
    </nde:category>

    <nde:pubdate year="2003" month="06" day="13"/>

    <nde:summary>
      Extending Classes is a powerful method in Object Oriented programming.
      Use this simple function to inherit properties and methods from 
      prototype objects.
    </nde:summary>
    
    <nde:channels>
      <nde:channel id="dom"/>
      <nde:channel id="examples"/>
    </nde:channels>
    
    <nde:keywords>
      Netscape, Netscape 7, Mozilla, Gecko, Opera, Internet Explorer, inheritance, Object Oriented
    </nde:keywords>
    
    <nde:authlist>
      <nde:author>
        <nde:authname>Bob Clary</nde:authname>
        <nde:authtitle>Evangelist</nde:authtitle>
        <nde:authaffil>Netscape Communications</nde:authaffil>
      </nde:author>
    </nde:authlist>

  </nde:header>

  <nde:head>
  </nde:head>

  <nde:content>

    <h2 name="introduction">Introduction</h2>

    <p>
      In C++ and similar languages, classes are extended through inheriting
      from parent classes. This ability to extend an existing class is a
      very useful technique in object oriented programming. 
      JavaScript<nde:trade/> uses <a href="/library/manuals/2000/javascript/1.5/reference/function.html#1193426">prototype-based inheritance</a>
      rather than <em>class-based</em> inheritance as found in C++. <code>inheritFrom</code>
      is a simple function which supports inheriting properties and methods
      from an object into an existing object without completely replacing
      the existing prototype. 
    </p>


    <h2 name="script">Script</h2>

    <p>
      <a href="inheritFrom.js">inheritFrom.js</a> implements a function:
    </p>

    <pre><![CDATA[inheritFrom(Object aThis, Object aParent)]]></pre>

    <p>
      <code>inheritFrom</code> will copy the properties of 
      the object <code>aParent</code> to the object <code>aThis</code>.
    </p>

    <h2 name="example1">Example 1</h2>
    <p>
      This example illustrates adding the properties and methods
      of <code>CExtraStuff</code> to the prototype of <code>CSimpleStuff</code>
      at run-time. Note that <code>CExtraStuff</code> must be defined
      before the script which contains the definition of 
      <code>CSimpleStuff</code> is loaded since an instance of <code>CExtraStuff</code>
      is created when the script loads.
    </p>

    <script type="text/javascript" src="inheritFrom.js"></script>
    <pre><![CDATA[
function CExtraStuff(/* String */ aValue)
{
  this.mExtraValue = aValue;
}

CExtraStuff.prototype.extraMethod = function()
{
  alert('Extra value is ' + this.mExtraValue);
};

function CSimpleStuff(/* String */ aValue)
{
  this.mValue = aValue;
}

CSimpleStuff.prototype.simpleMethod = function()
{
  alert('Simple value is ' + this.mValue);
};

inheritFrom(CSimpleStuff.prototype, new CExtraStuff('default extra value'));

function doExample1()
{
  var simple = new CSimpleStuff('default simple value');
  simple.simpleMethod();
  simple.extraMethod();
}
]]></pre>

    <script type="text/javascript"><![CDATA[
function CExtraStuff(/* String */ aValue)
{
  this.mExtraValue = aValue;
}

CExtraStuff.prototype.extraMethod = function()
{
  alert('Extra value is ' + this.mExtraValue);
};

function CSimpleStuff(/* String */ aValue)
{
  this.mValue = aValue;
}

CSimpleStuff.prototype.simpleMethod = function()
{
  alert('Simple value is ' + this.mValue);
};

inheritFrom(CSimpleStuff.prototype, new CExtraStuff('default extra value'));

function doExample1()
{
  var simple = new CSimpleStuff('default simple value');
  simple.simpleMethod();
  simple.extraMethod();
}
]]></script>
    <form method="get" action="">
      <input type="button" onclick="doExample1()" value="Run Example 1" />
    </form>

    <h2 name="example2">Example 2</h2>
    <p>
      This example illustrates adding the properties and methods
      of <code>CParent</code> to each instance of the <code>CChild</code>
      at construction time. Note that <code>CParent</code> need not be
      defined before the script which contains <code>CChild</code> is loaded.
      However, <code>CParent</code> must be defined before the first instance
      of <code>CChild</code> is created.
    </p>

    <script type="text/javascript" src="inheritFrom.js"></script>
    <pre><![CDATA[
function CParent(/* String */ aValue)
{
  this.mParentValue = aValue;
}

CParent.prototype.parentMethod = function()
{
  alert('Parent value is ' + this.mParentValue);
};

function CChild(/* String */ aValue)
{
  this.mValue = aValue;
  inheritFrom(this, new CParent('default parent value'));
}

CChild.prototype.childMethod = function()
{
  alert('Child value is ' + this.mValue);
};


function doExample2()
{
  var child = new CChild('default child value');
  child.childMethod();
  child.parentMethod();
}
]]></pre>

    <script type="text/javascript"><![CDATA[
function CParent(/* String */ aValue)
{
  this.mParentValue = aValue;
}

CParent.prototype.parentMethod = function()
{
  alert('Parent value is ' + this.mParentValue);
};

function CChild(/* String */ aValue)
{
  this.mValue = aValue;
  inheritFrom(this, new CParent('default parent value'));
}

CChild.prototype.childMethod = function()
{
  alert('Child value is ' + this.mValue);
};


function doExample2()
{
  var child = new CChild('default child value');
  child.childMethod();
  child.parentMethod();
}
]]></script>
    <form method="get" action="">
      <input type="button" onclick="doExample2()" value="Run Example 2" />
    </form>

  </nde:content>

  <nde:related area="nde">
    <nde:item url="/central/">DOM Central</nde:item>
    <nde:item url="/toolbox/examples/">Examples</nde:item>
  </nde:related>
  
</nde:article>
