Question

Lets get into it.
I’ve created a working “Inertial Camera” in Javascript, and while I’m very experienced in Javascript, I’m not experienced with prototyping in JS. I’m attempting to restructure my camera as follows, with the initial function constructor:

    function Inertia(subject, clickable) {
        this.subject = document.getElementById(subject);
        this.clickable = document.getElementById(clickable);
    }

And the prototype:

    Inertia.prototype = {
        subject : document.getElementById(''),
        clickable : document.getElementById(''),
        camera : { angleX : 85, angleY : 0, angleZ : 0, translateX : 0, translateY : -100, depth : 0, flag : 1 },
        mouse  : { x : 0, y : 0 },
        friction : 1,
        inertia : true,

        mouseEvents : {
            mouseDown   :   function( e ) {
                                var IS = this; // This will not work because I am two levels away from "this" being my object.

                                // cancel existing animation
                                clearTimeout((window).animation);

                                (IS).mouse.x = e.clientX;
                                (IS).mouse.y = e.clientY;
                                (IS).camera.flag = 0;

                                // begin logging history to animate from as a new history stack
                                (IS).tools.pushHistory('reset');
                            },

…
continued
…

My problem is that within my prototype object, I cannot access the root level elements such as mouse.x or mouse.y. What is the best method to access these elements for this specific instance of my “Inertia” class when creating a prototype like this? Is this the completely wrong idea?

I’m looking to understand the proper implementation of a prototype in this manner. I’ve looked up tutorials and articles on prototyping, and I’ve yet to see any examples address this nesting issue. They all use one level deep in their prototype so calling this is not problem.

I am attempting to have var IS equal the current object, so that in every instance of this inertial camera I will alter only that specific object. However, I am two levels deep within my prototype, so this keyword will not work. I could hardcode it equal to the variable name if I have only one instance of new Inertia(), but that is obviously not desirable.

Answer 1

Properties usually go inside the constructor and methods on the prototype. I think you may be missing some concepts; there’s no point on creating (and duplicating) properties inside the prototype because properties are unique to the instance. If those variables are meant to be private the usual convention is to prefix it with an underscore:

function Inertia( subject, clickable ) {

  this.subject = document.getElementById( subject );
  this.clickable = document.getElementById( clickable );

  // Private vars unique to each instance
  this._camera = { ... };
  this._mouse = { ... };
  this._friction = 1;
  this._inertia = true;

}

Inertia.prototype = {

  mouseDown: function( e ) {
    var self = this;
    // Now you can access and modify the private vars:
    self._mouse.x = e.clientX;
    ...
  }

};