Prototype of prototype function in Javascript

Question

I know that it's possible to add to the prototype of a function such that

function main(){}
main.prototype.load = function()
{

}
...

and run the function called main.load.

Is it possible to make a prototype of a function within that prototype? In other words, can I do something like this:

main.prototype.get = function(){}
main.prototype.get.prototype.registration = function()
{
    // load registration info
}

and call the function using main.get.registration();?

When I try to do this, I am given this error message in the console:

Uncaught TypeError: Object function (){} has no method 'registration'

EDIT: I am doing this after calling new main();. So I would be doing something like

var thisMain = new main();
thisMain.get.registration();

Answer 1

I think you misunderstand prototypes a bit.

Given a function Foo, Foo.prototype is not the prototype of the Foo object. It is the prototype that will be assigned to objects created using new Foo(). For example:

// This is a constructor that creates objects whose prototype is Person.prototype
var Person = function(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
}
var drew = new Person('Drew');
drew.sayHello();  // <-- Logs a message
drew.__proto__;   // <-- Not part of the Javascript spec, but it some browsers this is a reference to Person.prototype

Your main.get.registration could be implemented without prototypes:

main = function() {/* do stuff*/}
main.get = function() {/* this is a getter function? */}
main.get.registration = function() {/* I don't know what this does */}

What kind of interface or API are you hoping to create? Does it involve creating objects using new?

UPDATE: Here's one of many possible ways to implement what you want:

main = function() {
    // store a reference to this instance.
    var self = this;
    // Construct the get object.  It doesn't need to be a function because it's never invoked
    this.get = {};
    this.get.registration = function() {
        // Use self to refer to the specific instance of main you're interacting with.
        retrieveRegistrationFor(self); // <-- pseudo-code
    }
}

UPDATE 2: Here's how to construct the get object using a constructor, allowing you to use prototypes for everything. I've capitalized the names of your constructors, which is a best practice that helps to differentiate between normal functions/methods and constructors.

// Constructor for the get object.  This is only ever invoked in Main's constructor.
Getter = function(mainInstance) {
    this.self = mainInstance;
}
Getter.prototype.registration = function() {
    retrieveRegistrationFor(this.self); // <-- pseudo-code
}

Main = function() {
    // Construct the get object and attach it to this object.
    this.get = new Getter(this);
}

As the other answers have pointed out, there are lots of ways to construct objects in Javascript. It all depends on the situation and your personal coding style.

Answer 2

Perhaps what you want to do is this:

function main(){}
main.prototype.load = function()
{

};

main.prototype.get = function(){};
main.prototype.get.prototype.registration = function()
{
    // load registration info
    alert('hi, I\'m working');
};

var thisMain = new main();
var other = new thisMain.get();
other.registration();

Answer 3

This is just my personal opinion, but I've always found the protypical inheritance model in JavaScript hard to grok. It's difficult to reason with when writing the code, and it's more difficult to reason with maintaining the code 6 months later.

However, what I think you're asking is really just this: "Can I write a class which inherits methods on its members from an anonymous class?" When you rephrase it this way, I think it becomes clear that there is uncertain value in the approach. The whole purpose of writing classes is to support simple abstraction and encapsulation while keeping composition tight.

It would be more straightforward to use a tradition Object, ala:

var main = { 
    get: {
        registration: function() {
            //TODO
        }  
    }
}

and main.get.registration() is simple as pie. If you can leverage Object.create() and Object.defineProperties() to do this, all the better.

If you absolutely have to use prototypical inheritance, I like the simple Function.prototype extension that Mr. Kistner proposes:

Function.prototype.inheritsFrom = function(parentClassOrObject) {
    if (parentClassOrObject.constructor === Function) {
        //Normal Inheritance
        this.prototype = new parentClassOrObject;
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject.prototype;
    } else {
        //Pure Virtual Inheritance
        this.prototype = parentClassOrObject;
        this.prototype.constructor = this;
        this.prototype.parent = parentClassOrObject;
    }
    return this;
};

This allows you to then compose classes and inheritance like so:

/***
 * Method to create a Class with optional inheritance.
 * Generally, I oppose this semantic in JS:
 * partly because of the ineffability of the 'this' operator,
 * and partly because of the difficulty in grokking this.
 * What we're really saying here (through the wonders of functional programming) is this:
 *
 *      var MyClass1 = function(param1) {
 *          var ret = this;
 *          ret.id = param1;
 *          return ret;
 *      };
 *
 *      var MyClass2 = function(param1, param2) {
 *          var ret = this;
 *          MyClass1.apply(this, Array.prototype.slice.call(arguments, 0));
 *          ret.name = param2;
 *          return ret;
 *      };
 *
 *      MyClass2.prototype = new MyClass1;
 *      MyClass2.prototype.constructor = MyClass1;
 *      MyClass2.prototype.parent = MyClass1.prototype;
 *
 * I find this whole mode of operation as dull as it is stupid.
 * Nonetheless, there are occasions when the convention is suitable for type/instance checking
 *
 * Obviously, this method has very little utility if you are not using prototypal inheritance
*/
var MyClassCreatorMethod = function(name, inheritsFrom, callBack) {
    var obj = Object.create(null);
    obj[name] = function() {
        try {
            if(inheritsFrom ) {
                inheritsFrom.apply(this, Array.prototype.slice.call(arguments, 0));
            }
            callBack.apply(this, Array.prototype.slice.call(arguments, 0));
        } catch(e) {
            //do something
        }
    };
    if(inheritsFrom) {
        obj[name].inheritsFrom(inheritsFrom);
    }
    return obj[name];
};

From here, it becomes trivial to daisy-chain inherited classes. I just pulled this out of one of my projects, so not all of the semantics of this apply to you--it's just to illustrate a way to functionalize the behavior in a way that's easier to reason with.

Answer 4

I did get it to work with

main.prototype.get.prototype.registration();

But remember, as @the_system mentioned, that you can't use main.get directly; you have to go through the prototype to find the get function (and similarity with the registration function).