Sphere/Objects in JS

From Spheriki

What is an object?

An object is a collection of variables and methods, that act upon those variables.

What is a variable?

A variable is a changable value...

What is a method?

A method is a function that exists within an object.

Why would you want to use objects within your code?

It makes the code look nicer

It makes the code easier to manage

Take the example of coding an item system in sphere:

function item(name, amount, desc) {
	this.name = name;
	this.amount = amount;
	this.desc = desc;
}

What the code is doing:

• You are making a object, called Item
• Item has 3 parameters: name, amount and desc
• The curly brackets represent the inside of the object
• The name property is called inside the object using the code: this.name
• The name property is called outside the object using: ObjectName.name
• this.amount = amount means that the amount property of the object is set to the variable called amount

This part of the object code can be called the constructor. You could then do:

var Potion = new item("Potion", 1, "Cures your precious hp");
// Potion.name is now "Potion"
// Potion.amount is now 1
// Potion.desc is now "Cures your precious hp"

The new operator? new simply means create a new object of the type specified (e.g. new Item("Herb", 20, "Cures mp")). This means create a new object of type Item' by calling Item's constructor If you do not specify new when creating an object:

• You do not get the properties of the object.
• You'd only get the return value of the function called to create the object.

There is a workaround to this though.

You can also have methods within your objects:

item.prototype.draw = function(x, y, w, h) {
	GetSystemFont().drawTextBox(x, y, w, h, 0, this.name + ": " + this.amount + " " + this.desc);
}

prototype? prototype is a keyword meaning that you can define a property of an object. What you're doing when you define a prototype is saying that each instance of the object will have the property you define. Say: Herb.draw(16, 16, 200, 200) is the same as Potion.draw(16, 16, 200, 200) as they both have the same draw method.

Now when you do:

var Elixir = new Item("Elixir", 2, "Cures hp and mp");

You can draw info about the Elixir to the screen by doing:

Elixir.draw(16, 16, 200, 200);

You call a method, just like you would call a function, but with the object name and a dot in front of it.

What is the dot?

The dot is what is called the accessor, where you're accessing the data within the object (e.g. object.name). It's like saying the variable or method is inside the object and to get at it, you put a dot followed by its name.

When might they have different draw methods?

When you give them it. For example:

Potion.image = LoadImage("potion.png");
Potion.draw = function(x, y, w, h) {
	Potion.image.blit(x, y);
}

This replaces the Item.draw method with a custom draw method. Only the Potion object will draw an image of it, whereas the Herb object will use the default Item.draw method, which would draw some text.

More on 'this'

The keyword this is how you access the data inside the object (e.g. when defining a prototype).

And now I can't think of anything more, I hope this helps.

Next edit will create a proper structure for this. --NeoLogiX 00:32, 27 November 2007 (GMT)