Javascript function prototyping?

Question

I am learning PHASER HTML5 game dev framework based on javascript, during which I came across this piece of code which I am not able to understand

var BunnyDefender = {};        

BunnyDefender.Boot = function(game) {};

BunnyDefender.Boot.prototype = {    


preload: function()
   {                                       
    //-----to load objects and units before we begin our game
    this.load.image('preloadbar', 'images/loader_bar.png');         
    this.load.image('titleimage', 'images/TitleImage.png');
   },

create: function() 
    {

    this.input.addPointer();
    this.stage.backgroundColor = '#171642';

    this.state.start('Preloader');     // launches preloader from Boot.js         
     }

};  

Here from what I had learnt about javascript prototyping was that , to add any method to an object or constructor function we used the following syntax/example:

 function employee(name,jobtitle,born)
  {
     this.name=name;
     this.jobtitle=jobtitle;
     this.born=born;
  }

 var fred=new employee("Fred Flintstone","Caveman",1970);
 employee.prototype.salary=null;
 fred.salary=20000;

Please help !!!

Answer 1

So from what I understand from the question, you are not clear on static methods / properties in javascript.

Static methods can be called any time without creating a new instance of the class. Static methods are merely related code that may do something such as configure a class or uphold a design pattern such as creating / returning a singleton instance of the class.

// Constructor
var BunnyDefender = {};

// Prototype declarations
BunnyDefender.prototype = { ... }

// Static method implementing a crude singleton
BunnyDefender.Boot = function() {
    // Check if the static property _instance exists
    // if it doesn't. Create it one time only, thus our
    // BunnyDefender singleton is born.
    if ( ! BunnyDefender._instance )
        BunnyDefender._instance = new BunnyDefender();

    // Return the already created instance of BunnyDefender
    return BunnyDefender._instance;
};

As Boot is a static method of the class BunnyDefender we can call it without creating a new instance of bunny defender.

var bunnyDefender = BunnyDefender.Boot();

You can read more about static properties / methods in javascript tutorials/documentation such as this article.

Answer 2

When one uses the new statement.

var myobject = new BunnyDefender.boot();

All of the prototype properties/object of the prototype, (or to state it in programming terms, inherited by), the new object.

For example lets say i add a prototype property to the prototype property at the end of the inheritance chain.

Object.prototype.myproperty = true;

Now any object I create will inherit myproperty.

var a={}; /* object literal equiv to new Object(); */
document.write(a.myproperty); /* true */

I can change myproperty of my a object which creates a myproperty under my a object, but does not change the prototype.myproperty. The a.myproperty is read/write but if it does not exist it reads from the inheritance to find the property.

What this allows one to do, is create an API which I can copy using new statement. The new object created does not interfere with any other objects created from with the same constructor.

Somewhere in the code I expect a

var newgame = var new BunnyDefender.boot(); 

I'm not sure why they wanted to use this methodology for a game? The reason I would use this methodology would be when i wanted numerous objects which used the same API / lib but changed because the object also contains specifics like properties on one particular HTML element.

Maybe each Bunny is its own object?

var bunny1 = var new BunnyDefender.boot();
var bunny2 = var new BunnyDefender.boot();

Each bunny would get a full API which can use the this.referance. Share the same images, etc. If it were a hunting game each bunny could be located at different places on the screen and have different qualities after it eats, etc. What happens with bunny2 does not effect bunny1.

Starting a function with a capital letter is common practice to indicate it is a contructor function.