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
– Niet the Dark Absol, Commented Sep 16, 2014 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
– Felix Kling, Commented Sep 16, 2014 at 22:19
@FelixKling I totally understand that, I just don't understand that udpate part that comes after prototype — Alexander
– Alexander, Commented Sep 16, 2014 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. developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/… — Felix Kling
– Felix Kling, Commented Sep 16, 2014 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
– Alexander, Commented Sep 16, 2014 at 22:30

RobG · Accepted Answer · 2014-09-16 23:00:38Z

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. :-)

Collectives™ on Stack Overflow

How does .prototype works in JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related