Prototypes

for CSCI E3, Harvard University author(s): Larry Bouthillier

by DustyWhite

HTML

<div>
    <p>Exploring the object <code>prototype</code> property, and inheritance.  See the code comments for the explanation  </p>
    <p>Output will appear below:</p>
</div>
<div id="output"></div>

CSS

#output{
    width:80%;
    border: 1px solid black;
    padding: 1em;
}

JavaScript

// our Person constructor
function Person(fname, lname) {
    this.fname = fname;
    this.lname = lname;
}

/* If I add a method to its prototype, that method is accessible 
 *   just like it's a property defined in the constructor function
 */

//  Here I assign a method to the Person prototype 
Person.prototype.getFullName = function(){
	return this.fname + " " + this.lname;
}
//  And here I can access it on an object created from Person
var superman = new Person("Clark","Kent");
logMessage("fname (first name): " + superman.fname + "; " + "lname (last name): " + superman.lname + "; " +" fullname: " + superman.getFullName());  // Clark Kent


// Utility function for logging convenience
// Logs msg to the element with given id
// If id is undefined, logs to #output
function logMessage(msg, id){
    if (!id){
        id="output";
    }
    document.getElementById(id).innerHTML += msg + "<br>";
}