Print Page - javascript and inheritance

Title: javascript and inheritance
Post by: nikki on July 28, 2013, 04:13:30 AM

So iam learning some javascript and got stuck

lets imagine I want to create objects that have some position functionality

like

Code:

function GameObject() {
this.x = 0;
this.y = 0;
}

GameObject.prototype = {
setPosition: function(x, y) {
this.x = x;
this.y = y;
}

}

then somewhere else in my code I create the gameobjects like so

Code:

var o = Object.create(GameObject.prototype);
gameObjects.push(o);

this is all fine and dandy and together with the module pattern I can work quite cleanly.
but what if I would like to make an 'extended' class/function called GameOjectWithFrames //or something ;)

I imagine doing something like

Code:

function GameOjectWithFrames() {
//how to be a GameObject too?
//and have the next stuff extra?
this.frame=0;
}

GameOjectWithFrames.prototype = {
setFrame: function(frame) {
this.frame = frame;
}

}

and then how to instance it ?

Code:

var o = Object.create(GameOjectWithFrames.prototype);
gameObjects.push(o);

I suspect the reason I cannot find this easily is because it is non-idiomatic and needs to be done completely different,
or I search wrong.

so these last two steps are my question, how are they done irl?

Title: Re: javascript and inheritance
Post by: Sqorgar on July 28, 2013, 04:22:41 PM

Are you asking how to do inheritance with JavaScript?

The short answer is that you use ParentFunction.apply() in the constructor, then set the prototype to a new object of the parent type, which you then modify. Here's a sample from something I wrote:

Code:

function GEWindow()
{
GraphicEntity.apply(this);
this.width = 64;
this.height = 64;
this.color = "#ffffff";
}
GEWindow.prototype = new GraphicEntity();

GEWindow.prototype.update = function()
{
GraphicEntity.prototype.update.apply(this);
}

The long answer is that JavaScript doesn't actually use inheritance. When an object is queried for a function or value, it will check itself, and failing that, will check it's prototype object (which will check it's prototype object if it fails, and so on up the chain).

To do inheritance, you create a new object and then add to it by creating new variables and functions. When queried, it will check itself, then its prototype (which will be the original class object). The apply() function is a way to call a function with a different "this" value, allowing you to use the parent functions as if they were part of the current object.

Hope this makes sense. JavaScript is kind of confusing in how it does inheritance.

Title: Re: javascript and inheritance
Post by: Rusk on July 28, 2013, 04:42:40 PM

I was actually messing with this today. I used a similar technique from this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript). I suppose it does the same thing, but I'll try your version and see if I have better luck. I got the examples to work, but I couldn't get it working in my own code.

Title: Re: javascript and inheritance
Post by: Reiss on July 31, 2013, 11:10:22 PM

Yup, Sqogar's right. That said, you might want to use .call(this) instead of .apply(this), since it'll be slightly easier to pass arguments to the super constructor if you need to.

One of the problems I think you're running into is that you're using Object.create(GameObjectWithFrames.prototype) instead of new GameObjectWithFrames(). The Object.create method is... Honestly, not something you're going to want to mess around with at first until you understand how prototypes work. All it does is set prototypes, whereas you want to actually create objects and call their constructors. That's what the new keyword is for.

So to go back to your original example, here's how I'd do it:

Code:

function GameObjectWithFrames() {
   GameObject.call(this); // call super constructor
   this.frame=0;
}

// Set the prototype to be an instance of the superclass
GameObjectWithFrames.prototype = new GameObject();

// Set the subclass methods on the prototype
GameObjectWithFrames.prototype.setFrame = function(frame) {
   this.frame = frame;
};

// ...

var o = new GameObjectWithFrames();
gameObjects.push(o);

EDIT: I should mention: one of the ways I learned the most about Javascript was by using CoffeeScript (http://coffeescript.org/) and examining the compiled output. Honestly, CoffeeScript is a pretty decent introduction to JS — it's the same language, but with most of the syntax warts ironed out.

TIGSource Forums

Developer => Technical => Topic started by: nikki on July 28, 2013, 04:13:30 AM