Skip to content

Instantly share code, notes, and snippets.

@josmardias
Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josmardias/52c241f2bc462e72fc21 to your computer and use it in GitHub Desktop.
Save josmardias/52c241f2bc462e72fc21 to your computer and use it in GitHub Desktop.
How to create objects from the same "class" in javascript.
console.log("----------------------------------------------------------");
console.log("-- first of all, in JS, functions can be used as is, or called from objects");
var myf = function () {
return 1;
};
// as function
console.log(myf());
//as object method
var o = {};
o.f = myf;
console.log(o.f());
console.log("----------------------------------------------------------");
console.log("-- inside a function, the 'this' keyword refers to the object context");
o = {a: 1, b: 2};
o.myMethod = function () {
console.log("My this: " + this);
};
o.myMethod();
console.log("----------------------------------------------------------");
console.log("-- -- but this same function, when called without a contextual object, 'this'' will refer the window in browser or global context in node.js");
withoutObject = o.myMethod;
withoutObject();
console.log("----------------------------------------------------------");
console.log("So, a if you want an object with methods, you can do just it:");
myObject = {a: 1, b:2};
myObject.f = function () {
return this.a;
};
myObject.g = function () {
return this.b;
};
console.log(myObject.f());
console.log(myObject.g());
console.log("----------------------------------------------------------");
console.log("And you can change these object properties, and the methods will reflect those changes");
myObject.a = 11;
myObject.b = 12;
console.log(myObject.f());
console.log(myObject.g());
console.log("----------------------------------------------------------");
console.log("But, what if I want more than one object following the same behavior? Like a class?");
console.log("Functions also works as constructors. And can produce new objects using 'new' keyword");
var MyClass = function () {
//creating properties
this.a = 1;
this.b = 2;
};
//var myObject = new MyClass; -> you can ommit () if there is no parameter
var myObject1 = new MyClass();
var myObject2 = new MyClass();
console.log(myObject1.a);
console.log(myObject1.b);
console.log(myObject2.a);
console.log(myObject2.b);
console.log("----------------------------------------------------------");
console.log("And each object is a separated context, a separated 'this', so modifying one will not modify the other");
myObject1.a = 23;
myObject1.b = 27;
myObject2.a = 73;
myObject2.b = 77;
console.log(myObject1.a);
console.log(myObject1.b);
console.log(myObject2.a);
console.log(myObject2.b);
console.log("----------------------------------------------------------");
console.log("How can i fill it with methods? Just add them, as i do with properties?");
console.log("NO! This will generate a separated function for each instantiated object.");
console.log("So, to not replicate functions you can use the prototype keyword.");
/* wrong way
MyClass = function () {
this.a = 10;
// it's wrong cause each object will create the function above. After 10 instances, you'll have 10
//functions doing the same thing.
this.f = function () {
return this.a;
};
};
*/
//the right way
MyClass = function () {
this.a = 10;
};
MyClass.prototype.get_a = function () {
return this.a;
};
//and instatiate it the same way as before
myObject = new MyClass();
console.log(myObject.get_a());
console.log("----------------------------------------------------------");
console.log("Also, you can do like this, but you'll have to put your function in each instantiated object");
//the not so good way, but works
MyClass = function () {
this.a = 10;
};
get_a = function () {
return this.a;
};
//and suffer like this
myObject = new MyClass();
myObject.get_a = get_a; // <- this step is painful! use the "good way" to avoid it
console.log(myObject.get_a());
console.log("----------------------------------------------------------");
console.log("The good way again, but more complete");
var Fighter = function (obj) {
this.attack = obj.attack || 10;
this.defense = obj.defense || 10;
this.damage = obj.damage || 1;
this.life = obj.damage || 10;
this.name = obj.name || "Unknown";
};
Fighter.prototype.doAttack = function (other) {
if (other.defense > this.attack) {
return 0;
}
return this.doDamage(other);
};
Fighter.prototype.doDamage = function (other) {
other.takeDamage(this.damage);
return this.damage;
};
Fighter.prototype.takeDamage = function (amount) {
this.life -= amount;
};
Fighter.prototype.isAlive = function () {
return this.life > 0;
};
// fighters
f1 = new Fighter({
attack: 13,
defense: 13,
damage: 3,
life: 13,
name: "Great",
});
f2 = new Fighter({
name: "Weak"
});
// battle
console.log("\t\t -- Fight!! -- \t\t");
while (f1.isAlive() && f2.isAlive()) {
var damage = 0;
console.log(f1.name + " attacked " + f2.name);
damage = f1.doAttack(f2);
console.log("\t\tdone " + damage + " damage.");
console.log(f2.name + " attacked " + f1.name);
damage = f2.doAttack(f1);
console.log("\t\tdone " + damage + " damage.");
}
function isDead(c) {
if (c.isAlive()) {
return;
}
console.log("RIP " + c.name);
}
isDead(f1);
isDead(f2);
console.log("----------------------------------------------------------");
console.log("Home Work!");
console.log("1) Create a Battle class, accepting two Fighter's with a method to print participants");
console.log("2) Create a method called run(), that will make them fight");
console.log("3) Instantiate that class, and invoke the run() method");
console.log("4) Improve fighter class with some randomness. doAttack should accept a random value");
console.log("5) Improve battle class to pass random values to Fighters while attacking");
console.log("6) Improve Fighters to have a maxLife and a recover attribute, so they can recover during battle");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment