About prototype and prototypejs

Question

I want to understand about this prototype.

Can any of you clarify what is the difference between the prototype used in

https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript link and http://www.prototypejs.org/learn/class-inheritance

thanks in advance.

Answer 1

There is no difference. Prototype JS is just a framework that makes working with JavaScript easier. The prototype property in both cases belong to functions which are being used as constructors, which is simply JavaScript.

If you would like to know more about inheritance in JavaScript then read the following answer. Personally I don't like using any framework. The only framework I use is Vapor.js. However when working with classes I usually make use of the following gist:

var Class = function () {
    var slice = Array.prototype.slice;
    var bind = Function.prototype.bind;

    var prototype = Class.prototype = new Function;
    return prototype.constructor = Class;

    function Class(definition, base) {
        var klass = function () {
            var instance = this;

            if (base instanceof Class)

            var uber = function () {
                if (uber instanceof base) return uber;

                arguments = slice.call(arguments);
                arguments = [null].concat(arguments);
                uber = bind.apply(base, arguments);
                uber = new uber;

                var hyper = instance.__proto__ = uber;
                var proto = hyper.__proto__;

                while (proto != parent) {
                    hyper = proto;
                    proto = hyper.__proto__;
                }

                hyper.__proto__ = child;

                return uber;
            };

            var constructor = definition.call(this, uber);
            constructor.apply(this, arguments);
        };

        if (base instanceof Class) {
            klass.__proto__ = base;
            var child = klass.prototype;
            var parent = child.__proto__ = base.prototype;
        } else klass.__proto__ = prototype;

        return klass;
    }
}();

This allows me to create classes as follows:

var Rectangle = new Class(function () {
    var width;
    var height;

    function constructor(length, breadth) {
        width = length;
        height = breadth;
    }

    this.area = function () {
        return width * height;
    };

    return constructor;
});

Inheritance is as simple as:

var Square = new Class(function (uber) {
    return function (side) {
        uber(side, side);
    };
}, Rectangle);

You may also use base class methods like:

var Cube = new Class(function (uber) {
    var side;

    function constructor() {
        side = arguments[0];
        uber = uber(side);
    }

    this.area = function () {
        return 6 * uber.area();
    };

    this.volume = function () {
        return side * uber.area();
    };

    return constructor;
}, Square);

Each class has it's own prototype object. Thus any properties on the prototype or the class itself (static properties) are automatically inherited by each derived class. Properties defined inside the class will not be inherited until the uber function is called. The uber function returns an instance of the base class so that the base class methods may be called.

Edit: Here's a working example of the above pattern:

var cube = new Cube(5);
alert("Side of the cube: 5");
alert("Area of the cube: " + cube.area());     // 150
alert("Volume of the cube: " + cube.volume()); // 125

Answer 2

The second link is describing Prototype, a framework for building JavaScript applications; it is a proper name. (Kind of like naming a windowing system "Windows", to pick a random example.) The word "prototype" as used in the first link is the standard terminology for how JavaScript works internally. The framework was named after the prototype concept.

There's a very good introduction to the concept of "prototypes" in JavaScript at this link.

Answer 3

Prototype mentioned at https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript is a programming style (Object-oriented programming without the use of class); whereas

Prototype mentioned at http://www.prototypejs.org is a JavaScript library or framework, similar to jQuery, MooTools and the likes.