superclass function being called when subclass function is invoked - javascript

I was really struggling coming up with a title but basically I'm working on a game in the html5 canvas and have a class called player with a subclass aiPlayer for when playing against ai. The code for updating the players looks like this:
var entitiesCount = this.entities.length;
for (var i = 0; i < entitiesCount; i++) {
var entity = this.entities[i];
entity.update();
if (entity instanceof special && entity.x > WIDTH || entity.x + 200 < 0) {
this.entities.splice(i, 1);
entitiesCount--;
}
}
However, the aiPlayer never updates with the aiPlayer update function. I've printed out the constructor of each entity and there is one Player and one aiPlayer. However, when printing out the method they are calling, both of them are calling the Player update. Does anyone know why it would do this?
Also, if it helps, the aiPlayer update looks like:
aiPlayer.prototype.update = function() {
if((this.game.timer.gameTime % this.moveTime) > (this.moveTime * 0.9)) {
this.chooseMove();
}
Player.prototype.update.call(this);
};
And ai constructor looks like:
function aiPlayer (game, character, x, y, health) {
Player.call(this, game, character, x, y, health, PLAYER2_CONTROLS, "left");
aiPlayer.prototype = new Player(this.game, this.character, this.x, this.y,
this.health, this.control, this.facing);
aiPlayer.prototype.constructor = aiPlayer;
this.controls = PLAYER2_CONTROLS;
this.attackLength = 50;
this.fleeLength = 70;
this.moveTime = 1;
this.prevControl = "idle";
}

function aiPlayer (game, character, x, y, health) {
Player.call(this, game, character, x, y, health, PLAYER2_CONTROLS, "left");
aiPlayer.prototype = new Player(this.game, this.character, this.x, this.y,this.health, this.control, this.facing);
aiPlayer.prototype.constructor = aiPlayer;
this.controls = PLAYER2_CONTROLS;
this.attackLength = 50;
this.fleeLength = 70;
this.moveTime = 1;
this.prevControl = "idle";
}
These lines here
aiPlayer.prototype = new Player(this.game, this.character,
this.x, this.y,this.health,
this.control, this.facing);
aiPlayer.prototype.constructor = aiPlayer;
are wrong. They are wrong because
you are setting the prototype to an Instance of Player
you are resetting the prototype and the constructor of the prototype of aiPlayer every time you create a new instance of aiPlayer. You should move all modifications to the prototype outside of the constructor function, like this:
-
function aiPlayer (game, character, x, y, health) {
Player.call(this, game, character, x, y, health, PLAYER2_CONTROLS, "left");
this.controls = PLAYER2_CONTROLS;
this.attackLength = 50;
this.fleeLength = 70;
this.moveTime = 1;
this.prevControl = "idle";
}
aiPlayer.prototype.someMethod = function someMethod() {
....
}
A correct way to set the prototype of the subclass is like this
aiPlayer.prototype = Object.create(Player.prototype, {
constructor : {
value : aiPlayer
}
};
This will set as the aiPlayer prototype a new object that inherits from Player.prototype (i.e. has Player.prototype as its prototype) and has aiPlayer registered as its constructor function
Also, the .update of Player is called from aiPlayer because you explicitly calling it here
aiPlayer.prototype.update = function() {
if((this.game.timer.gameTime % this.moveTime) > (this.moveTime * 0.9)) {
this.chooseMove();
}
Player.prototype.update.call(this); //you call the Player.update()
};
Considering the above, this is how you should register the aiPlayer.update
aiPlayer.prototype = Object.create(Player.prototype, {
constructor : {
value : aiPlayer
}
};
aiPlayer.prototype.update = function update() {
//your code here
}
Now, when you create a new aiPlayer object instance, the inheritance chain will go like this
aiPlayerInstance --> aiPlayer.prototype --> Player.prototype
and when you call aiPlayerInstance.update() it will first look to aiPlayer.prototype and since aiPlayer.prototype does have a method called update it will execute it, and it will not look any further down the inheritance chain (i.e. in Player.prototype)

Related

Something about prototype in Javascript

I write the Javascript code as follow:
function Shape() {
this.x = 0;
this.y = 0;
}
function Rectangle() {
Shape.call(this); // call super constructor.
}
Rectangle.prototype = Object.create(Shape.prototype);
function Tmp() {
this.a = 0;
this.b = 0;
}
Rectangle.prototype.constructor = Tmp;
var rect = Object.create(Rectangle.prototype);
console.log(rect)
then the output is:
The rect should be initialized by constructor function Tmp.my question is where is the attribution a and b of the object rect which initialized by the constructor function Tmp?
The rect should be initialized by constructor function Tmp
If you want that, you'd do:
Tmp.call(rect);
...after
var rect = Object.create(Rectangle.prototype);
function Shape() {
this.x = 0;
this.y = 0;
}
function Rectangle() {
Shape.call(this); // call super constructor.
}
Rectangle.prototype = Object.create(Shape.prototype);
function Tmp() {
this.a = 0;
this.b = 0;
}
//Rectangle.prototype.constructor = Tmp;
var rect = Object.create(Rectangle.prototype);
Tmp.call(rect);
console.log(rect);
Object.create doesn't call any functions at all, it just creates the object with the given prototype. So neither Rectangle nor Shape nor Tmp is called by doing var rect = Object.create(Rectangle.prototype);.
Or if you also want Rectangle to do its job, replace the Object.create call with:
var rect = new Rectangle();
Tmp.call(rect);
It's very strange to set the constructor property of Rectangle.prototype to Tmp, not Rectangle. I would strongly suggest not doing that. And there's no need to if all you want is for Tmp to initialize an instance. The constructor property of the object referenced by SomeFunction.prototype should be SomeFunction, never anything else.

Inheritance with JavaScript and Create Method [duplicate]

I don't understand this behavior in javascript for inheritance I've always seen it defined like so :
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg;
this.hit = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
}
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
function Spaceship(){
console.log("instantiate ship");
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
But in my case, these lines :
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
When I do a console.log(this) in my Spaceship constructor, I can see that the proto property is set to Spaceship instead of GameObject, if I remove them, it is set to GameObject.
And if I use :
Spaceship.prototype = GameObject.prototype;
I have no more problems with that. The reason that this blocks me is that I have another object with an add() method and it checks that the object inerhits of GameObject with this code :
if(object instanceof GameObject)
I don't understand what those two lines can probably change so that inheritance is broken when they are present and I'm not sure doing inheritance the second way is good. Could someone enlighten me about this please ? :)
If you do
Spaceship.prototype = GameObject.prototype;
Then they both refer to the same object, so you might as well have everything in GameObject, if you add something to Spaceship.prototype, it will be added to GameObject.prototype as well. You can easily test it by adding something to Spaceship.prototype after the assignment. For example, in your case you can see that GameObject.prototype.constructor is actually Spaceship.
As for
Spaceship.prototype = new GameObject();
This invokes the constructor which might have undesired side effects, you rather want to use:
Spaceship.prototype = Object.create(GameObject.prototype);
Where the used Object.create functionality here comes down to:
Object.create = function( proto ) {
function f(){}
f.prototype = proto;
return new f;
};
Modern browsers already have the function though.
It was never properly explained why you were getting weird behavior with this.hitBox (I think that's what you were trying to say).
If you do inheritance by invoking the parent's constructor to create a prototype, that parent's constructor is executed once to create an instance of the parent type, and then all instances of the child type will share that one instance as their prototype.
The problem with this is that if that constructor has any lines that assign mutable objects to this, then those objects will be properties on that prototype and any modifications to those objects will be reflected across all instances of the child type:
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 12 (oh noes! what happened)
console.log(sps2.hitBox.x); // 12
(there are other, similar problems with the "call a constructor to make a prototype" approach, but I'll just leave it here on that point)
#Esailija's suggestion to use Object.create(baseObject) is the first step to solving this problem. It creates a new object whose prototype is baseObject, but without the stuff that is set up in the constructor (This is a good thing, but it needs to be accounted for. Read on...).
As I just said, this will create an object where the initialization logic in the parent's constructor has never run, but in most cases that logic is relevant to the object's functionality. So there is one more thing you need to do, which is to have the child constructor call the parent constructor:
function Spaceship(oImg, x, y) {
// call parent constructor on this object and pass in arguments.
// you could also use default values for the arguments when applicable
GameObject.call(this, oImg, x, y);
// remainder of Spaceship constructor...
}
This will ensure that the parent constructor logic runs separately for every new Spaceship, and carries out the necessary initialization tasks.
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg || {width:null, height: null};
this.hitBox = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = this.img.width;
this.hitBox.height = this.img.height;
}
function Spaceship(){
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
Spaceship.prototype = new GameObject();
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 9
console.log(sps2.hitBox.x); // 12

Javascript - Alternate way to order functions?

So I'm making my "Sprite" class, and right now it works properly when it's laid out like this (alot of this is unnecessary, but might help you understand):
function Entity(tname)
{
if (typeof (tname) === 'undefined') tname = "Entity";
this.tname = tname;
}
Entity.prototype.confirmType = function(tname)
{
if (this.tname === tname) return true;
else return false;
}
Entity.prototype.constructor = Entity;
function Sprite(tname, x, y, src)
{
this.parent.constructor.call(this, tname);
this.x = x;
this.y = y;
this.img = new Image();
this.img.src = src;
this.render = function()
{
ctx.drawImage(this.img, this.x, this.y);
}
}
Sprite.prototype = Object.create(Entity.prototype);
Sprite.prototype.constructor = Sprite;
Sprite.prototype.parent = Entity.prototype;
var sprite = new Sprite("Lucario", 400, 400, "img/slot.png");
var update = function()
{
sprite.render();
}
But what I want to do is make Sprite's render function just like Entity's confirmType function, outside the constructor.
What I want to do is this:
function Sprite(tname, x, y, src)
{
...
}
Sprite.prototype.render = function()
{
ctx.drawImage(this.img, this.x, this.y);
}
Not:
function Sprite(tname, x, y, src)
{
...
this.render = function()
{
ctx.drawImage(this.img, this.x, this.y);
}
}
Basically, I want to add functions to subclasses, not just override preexisting ones. Can someone help me?
If I understand your issue, it may be purely an issue of the order of your Javascript statements. You don't show the whole sequence of code, but when you do this:
Sprite.prototype = Object.create(Entity.prototype);
That replaces the entire prototype on the Sprite object so if you had previously put any methods on the prototype, they would be wiped out by this assignment. If you then want to add more methods to the Sprite prototype, just add them after you do that (not before):
Sprite.prototype = Object.create(Entity.prototype);
Sprite.prototype.render = function() {
ctx.drawImage(this.img, this.x, this.y);
}
If you did them in the other order, it would not work:
Sprite.prototype.render = function() {
ctx.drawImage(this.img, this.x, this.y);
}
// replaces the entire prototype object, wiping out any methods that were on it
Sprite.prototype = Object.create(Entity.prototype);

Why is Child.prototype = Object.create(Parent.prototype) so common, which seemingly introduces unnecessary indirection? [duplicate]

I don't understand this behavior in javascript for inheritance I've always seen it defined like so :
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg;
this.hit = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
}
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
function Spaceship(){
console.log("instantiate ship");
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
But in my case, these lines :
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
When I do a console.log(this) in my Spaceship constructor, I can see that the proto property is set to Spaceship instead of GameObject, if I remove them, it is set to GameObject.
And if I use :
Spaceship.prototype = GameObject.prototype;
I have no more problems with that. The reason that this blocks me is that I have another object with an add() method and it checks that the object inerhits of GameObject with this code :
if(object instanceof GameObject)
I don't understand what those two lines can probably change so that inheritance is broken when they are present and I'm not sure doing inheritance the second way is good. Could someone enlighten me about this please ? :)
If you do
Spaceship.prototype = GameObject.prototype;
Then they both refer to the same object, so you might as well have everything in GameObject, if you add something to Spaceship.prototype, it will be added to GameObject.prototype as well. You can easily test it by adding something to Spaceship.prototype after the assignment. For example, in your case you can see that GameObject.prototype.constructor is actually Spaceship.
As for
Spaceship.prototype = new GameObject();
This invokes the constructor which might have undesired side effects, you rather want to use:
Spaceship.prototype = Object.create(GameObject.prototype);
Where the used Object.create functionality here comes down to:
Object.create = function( proto ) {
function f(){}
f.prototype = proto;
return new f;
};
Modern browsers already have the function though.
It was never properly explained why you were getting weird behavior with this.hitBox (I think that's what you were trying to say).
If you do inheritance by invoking the parent's constructor to create a prototype, that parent's constructor is executed once to create an instance of the parent type, and then all instances of the child type will share that one instance as their prototype.
The problem with this is that if that constructor has any lines that assign mutable objects to this, then those objects will be properties on that prototype and any modifications to those objects will be reflected across all instances of the child type:
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 12 (oh noes! what happened)
console.log(sps2.hitBox.x); // 12
(there are other, similar problems with the "call a constructor to make a prototype" approach, but I'll just leave it here on that point)
#Esailija's suggestion to use Object.create(baseObject) is the first step to solving this problem. It creates a new object whose prototype is baseObject, but without the stuff that is set up in the constructor (This is a good thing, but it needs to be accounted for. Read on...).
As I just said, this will create an object where the initialization logic in the parent's constructor has never run, but in most cases that logic is relevant to the object's functionality. So there is one more thing you need to do, which is to have the child constructor call the parent constructor:
function Spaceship(oImg, x, y) {
// call parent constructor on this object and pass in arguments.
// you could also use default values for the arguments when applicable
GameObject.call(this, oImg, x, y);
// remainder of Spaceship constructor...
}
This will ensure that the parent constructor logic runs separately for every new Spaceship, and carries out the necessary initialization tasks.
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg || {width:null, height: null};
this.hitBox = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = this.img.width;
this.hitBox.height = this.img.height;
}
function Spaceship(){
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
Spaceship.prototype = new GameObject();
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 9
console.log(sps2.hitBox.x); // 12

Why wouldn't I use Child.prototype = Parent.Prototype rather than Child.prototype = new Parent(); for Javascript inheritance?

I don't understand this behavior in javascript for inheritance I've always seen it defined like so :
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg;
this.hit = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
}
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
function Spaceship(){
console.log("instantiate ship");
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
But in my case, these lines :
this.hitBox.width = oImg.width;
this.hitBox.height = oImg.height;
When I do a console.log(this) in my Spaceship constructor, I can see that the proto property is set to Spaceship instead of GameObject, if I remove them, it is set to GameObject.
And if I use :
Spaceship.prototype = GameObject.prototype;
I have no more problems with that. The reason that this blocks me is that I have another object with an add() method and it checks that the object inerhits of GameObject with this code :
if(object instanceof GameObject)
I don't understand what those two lines can probably change so that inheritance is broken when they are present and I'm not sure doing inheritance the second way is good. Could someone enlighten me about this please ? :)
If you do
Spaceship.prototype = GameObject.prototype;
Then they both refer to the same object, so you might as well have everything in GameObject, if you add something to Spaceship.prototype, it will be added to GameObject.prototype as well. You can easily test it by adding something to Spaceship.prototype after the assignment. For example, in your case you can see that GameObject.prototype.constructor is actually Spaceship.
As for
Spaceship.prototype = new GameObject();
This invokes the constructor which might have undesired side effects, you rather want to use:
Spaceship.prototype = Object.create(GameObject.prototype);
Where the used Object.create functionality here comes down to:
Object.create = function( proto ) {
function f(){}
f.prototype = proto;
return new f;
};
Modern browsers already have the function though.
It was never properly explained why you were getting weird behavior with this.hitBox (I think that's what you were trying to say).
If you do inheritance by invoking the parent's constructor to create a prototype, that parent's constructor is executed once to create an instance of the parent type, and then all instances of the child type will share that one instance as their prototype.
The problem with this is that if that constructor has any lines that assign mutable objects to this, then those objects will be properties on that prototype and any modifications to those objects will be reflected across all instances of the child type:
Spaceship.prototype = new GameObject();
Spaceship.prototype.constructor = Spaceship;
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 12 (oh noes! what happened)
console.log(sps2.hitBox.x); // 12
(there are other, similar problems with the "call a constructor to make a prototype" approach, but I'll just leave it here on that point)
#Esailija's suggestion to use Object.create(baseObject) is the first step to solving this problem. It creates a new object whose prototype is baseObject, but without the stuff that is set up in the constructor (This is a good thing, but it needs to be accounted for. Read on...).
As I just said, this will create an object where the initialization logic in the parent's constructor has never run, but in most cases that logic is relevant to the object's functionality. So there is one more thing you need to do, which is to have the child constructor call the parent constructor:
function Spaceship(oImg, x, y) {
// call parent constructor on this object and pass in arguments.
// you could also use default values for the arguments when applicable
GameObject.call(this, oImg, x, y);
// remainder of Spaceship constructor...
}
This will ensure that the parent constructor logic runs separately for every new Spaceship, and carries out the necessary initialization tasks.
function GameObject(oImg, x, y) {
this.x = x;
this.y = y;
this.img = oImg || {width:null, height: null};
this.hitBox = new Object();
this.hitBox.x = x;
this.hitBox.y = y;
this.hitBox.width = this.img.width;
this.hitBox.height = this.img.height;
}
function Spaceship(){
GameObject.apply(this, arguments);
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.friction = 0.94;
}
Spaceship.prototype = new GameObject();
var sps1 = new Spaceship();
var sps2 = new Spaceship();
sps1.hitBox.x = 9;
sps2.hitBox.x = 12;
console.log(sps1.hitBox.x); // 9
console.log(sps2.hitBox.x); // 12

Categories