.prototype如何在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);
    }

Answer 1

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