CSC/ECE 517 Fall 2014/ch1b 30 cs

Prototype-based Programming

Most people are familiar with class-based languages, in which to create an object, one defines a class containing functions and variables, and then objects are instantiated from the class. Prototype-based programming is an alternative approach to creating objects, where instead of a class, they get their properties from other objects<ref name="moz" />.

As an example, consider creating an object in a class-based approach. We would define a Class that contains the variable var1 and function func1(). Then within the class we would define a constructor, which will create Object which can access func1() and may have a value assigned to var1. Our object is limited to these two properties which we defined in Class, so if we wanted to have Object.var2 as well, we would need to define a new subclass and create objects from the subclass. On the other hand, in a prototype-based approach we would just define a function that creates an object from a prototype containing var1 and func1(). The constructor gives us a new object that has the same properties as the prototype. But in this case, if we want to have Object.var2 or Object.func2(), we can simply declare them after object creation because we are not bound by a class definition.

Benefits and Drawbacks

Classes and prototypes are commonly seen as not strictly better than the other, but rather just appropriate for different situations<ref name="shah" /><ref name="se1" />. Prototypes offer more flexibility through the ability to add, modify or remove properties from objects at run time, without needing separate classes for each variation. Thus, creating clones or descendants of object can be accomplished with less code. However, you give up the benefits of static typing which might make your code more error prone.

Prototypes in JavaScript

JavaScript is perhaps the most popular prototype-based language. Confusingly, its syntax can give the appearance of being class-based, e.g.

var james = new Student("James Jones", 200031416);

However, this does not create an object of the Student class<ref name="pivotal" />. Consider our constructor function:

function Student(name, id) {
    this.ID = id;
    this.Name = name;
    this.AddToCourse = function(course) {
        // a function for the object
    };
}

Note that there is nothing special about this function that makes it a "constructor" function. Instead, we use the new keyword before the function call to signify that a new object is being created. The james.constructor property of our new object is set to the Student function, and then the function runs while treating this as the new object.

Functions in JavaScript also have a prototype property, which is just a regular, initially empty object. If we try to access a property that the object does not have, then JavaScript will look to the object's constructor's prototype. For example:

Student.prototype.SemesterCreditLimit = 13;
console.log(james.SemesterCreditLimit); // ==> 13

delete Student.prototype.SemesterCreditLimit;
console.log(james.SemesterCreditLimit); // ==> undefined

References

<references> <ref name="moz">Mozilla Developer Network, "Details of the Object Model"</ref> <ref name="shah">Aadit Shah, "Why Prototypal Inheritance Matters"</ref> <ref name="se1">Programmers Stack Exchange, "What are the advantages of prototype-based OOP over class-based OOP?"</ref> <ref name="pivotal">Pivotal Labs, "JavaScript constructors, prototypes, and the `new` keyword"</ref> </references>