How does .prototype works in JavaScript?

Question

I just started a tutorial in game development using JavaScript and HTML5. javascript.prototype has come into play many times. I can not really understand how it works. Here is a link I found with a good explanation, but I am still a little bit confused

How does JavaScript .prototype work?.

Can anyone explain this please? Here is an example of my code:

 function Enemy(){
        this.srcX = 140;  //gets the location of enemy in x and Y here
        this.srcY = 600;
        this.width = 45;//gets the enemies width and height here
        this.height = 54; 
        this.drawX = randomRange(0, canvasWidth  - this.width);
        this.drawY = randomRange(0, canvasHeight - this.height); 
        this.centerX = this.drawX + (this.width / 2);
        this.centerY = this.drawY +(this.height / 2);

        //this.targetX = this.centerX;
        //this.targetY = this.centerY;
        //this.randomMoveTime = randomRange(4000,10000);
        this.speed = 1;
        //var that = this;
        //this.moveInterval = setInterval(function() {that.setTargetLocation();},that.randomMOveTime);
        this.isDead = false;
    }

    Enemy.prototype.update = function() {
        //this.checkDirection();
         this.centerX = this.drawX + (this.width / 2);
        this.centerY = this.drawY + (this.height / 2);
    }

Magic. In seriousness though, it literally just means "All Enemy objects will have an `update` function". — Niet the Dark Absol, Sep 16 '14 at 22:16
*"but I am still a little bit confused"* About what exactly? What exactly from the answers in the other question did you not understand? Does it help if I tell you that `new Enemy()` is (roughly) equivalent to `var newObj = Object.create(Enemy.prototype); Enemy.apply(newObj, arguments); return newObj;` ? — Felix Kling, Sep 16 '14 at 22:19
@FelixKling I totally understand that, I just don't understand that udpate part that comes after prototype — Alexander, Sep 16 '14 at 22:25
`Enemy.prototype` is an object. `Enemy.prototype.update = function() {...};` assigns a function to the `update` property of that object. Since the property doesn't exist yet, it is created. Simpler example: `var foo = {}; foo.bar = function() { console.log('hi'); }; foo.bar();`. This has nothing to do with prototypes. This is how objects in JavaScript work. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects — Felix Kling, Sep 16 '14 at 22:26
@FelixKling in this case we are creating the update property for the enemy object. It has nothing to do with a different function I have which is called update — Alexander, Sep 16 '14 at 22:30
@Alexander: Is that a question? I have no idea what you are trying to tell me with that comment. — Felix Kling, Sep 16 '14 at 22:32
@FelixKling sorry English is my second language. In this case update is a property of Enemy.property object. — Alexander, Sep 16 '14 at 22:39
@FelixKling okay, my question is. I also have a function "method" that is called update which I did not mention here. Is that function related to the update property? — Alexander, Sep 16 '14 at 22:42
You mean you have `Enemy.prototype.update = ...;` and `function update() { ... }` somewhere? No, they are not related. Just like `foo.bar` and `bar` are not related in this example: `var foo = {}; foo.bar = 42; var bar = 21;`. — Felix Kling, Sep 16 '14 at 22:44
Maybe the following can help you understand what the prototype and constructor functions are used for. http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Sep 16 '14 at 23:10

score 1 · Answer 1 · answered Sep 16 '14 at 23:00

I think the biggest confusion over prototype inheritance is that that objects inherit from their contructor's prototype via their internal [[Prototype]] property. Both are referred to as "the prototype". All functions have a default prototype property that is an empty object.

In your case:

function Enemy(){
        this.srcX = 140;  //gets the location of enemy in x and Y here
        this.srcY = 600;
        ...
}

is a function that, when called with new, acts as a constructor that assigns properties to a new instance of itself. That instance has an internal [[Prototype]] property that points to Enemy.prototype.

Then:

Enemy.prototype.update = function() {
    //this.checkDirection();
     this.centerX = this.drawX + (this.width / 2);
    this.centerY = this.drawY + (this.height / 2);
}

This assigns a new property to Enemy.prototype that is a function. So that puts an update property on the inheritance chain of all instances of Enemy, so they all inherit an update method.

So:

var enemy0 = new Enemy();
var enemy1 = new Enemy();

typeof enemy0.update // function
typeof enemy1.update // function

enemy0.update === enemy1.update  // true

The test can only be true if both expressions reference the same object (i.e. the function assigned to Enemy.prototype.update).

You can continue to add properties and methods to Enemy.prototype and they will be inherited by all instances, even those already constructed. But if you change it to a different object:

Enemy.prototype = {update:function(){/*new update function*/}};

then old instances will still have the old [[Prototype]] and new instances will have the new one.

There are a million articles on the web about javascript's prototype inheritance, read a few and play with it, ask more questions if you have them. :-)

How does .prototype works in JavaScript?

1 Answers1