How to Add Methods to a Function?

Question

There are many ways to call functions in JavaScript, but this just isn't working for me. Could someone please tell me exactly what I'm doing wrong?

I tried prototyping (e.g. gameObject.prototype = {};), but that didn't work for some reason. Now I'm just trying to assign the methods directly within the function, and that isn't even working.

What's wrong with this picture?

function gameObject() {
 this.o = {};
 this.setimage = function(i) {
 this.o.img = i;
 };
 this.setDimensions = function(w, h) {
 this.o.width = w;
 this.o.height = h;
 };
 this.setPosition = function(x, y) {
 this.o.x=x;
 this.o.y=y;
 };
 this.create = function() {
 var el = document.createElement("div");
 el.className = "object " + this.o.cname;
 el.style.width = width * this.o.w;
 el.style.height = height * this.o.h;
 el.style.position = "absolute";
 el.style.top = height * this.o.y;
 el.style.left = width * this.o.x;
 map.appendChild(el);
 };
 this.setClass = function(c) {
 this.o.cname = c;
 };
 return this.o;
}

What I want is something like this:

var d = new gameObject();
d.setClass("class");
d.setDimensions(0.8, 0.15);

I'm still fairly new to object oriented programming, so I don't even know if my vocabulary is correct. What is it that I'm trying to do and what's the proper way to do it exactly?

• Ja͢ck: Why are you returning this.o from the constructor? I would just drop that, and your code should work.
• Ja͢ck: Btw, how many game objects are you expecting to use?
• Ricky Yoder: It's a variable amount, considering I want to allow users to create their own in-game objects.

Answer 1

You should not return anything from this constructor.

Remove this:

return this.o;

Demo here.

If you return a value from a constructor, the object created will of the type of the returned value.

Demo here. If you see this demo, d.a returns 4 means new gameObject returned the this.o value instead of this which is the gameObject().

If you want to use prototype:

function gameObject() {
 this.o = {};
}
gameObject.prototype = {
 setimage:function(i) {
 this.o.img = i;
 },
 setDimensions:function(w, h) {
 this.o.width = w;
 this.o.height = h;
 },
 setPosition:function(x, y) {
 this.o.x = x;
 this.o.y = y;
 },
 create:function() {
 var el = document.createElement("div");
 el.className = "object " + this.o.cname;
 el.style.width = width * this.o.w;
 el.style.height = height * this.o.h;
 el.style.position = "absolute";
 el.style.top = height * this.o.y;
 el.style.left = width * this.o.x;
 map.appendChild(el);
 },
 setClass:function(c) {
 this.o.cname = c;
 }
}

Demo here.

• Ja͢ck: That should not be such a generic statement; in this case nothing should be returned from the constructor :)

Answer 2

In javascript, the best way to create instance methods is using a prototype. This code should work:

function gameObject(){
 this.o={};
};
gameObject.prototype = {
 setimage: function(i){
 this.o.img=i;
 },
 setDimensions: function(w,h){
 this.o.width=w;
 this.o.height=h;
 },
 setPosition: function(x,y){
 this.o.x=x;
 this.o.y=y;
 },
 create: function(){
 var el=document.createElement("div");
 el.className="object "+this.o.cname;
 el.style.width=width*this.o.w;
 e.style.height=height*this.o.h;
 el.style.position="absolute";
 el.style.top=height*this.o.y;
 el.style.left=width*this.o.x;
 map.appendChild(el);
 },
 setClass: function(c){
 this.o.cname=c;
 }
};

The issue with how you were doing it before was returning something - you don't need to do that.

Answer 3

Here's an example of using function methods within functions. I find this pattern easier to read and understand vs using classes or prototypes.

function Foo() {
 // Using this. makes the barf function accessible from Foo instances.
 // can also be written as: function this.barf (item) = {
 this.barf = (item) => { 
 console.log(`ate a ${item} and barfed!`);
 };
 // the eat function is internal to Food only (not using this.)
 let eat = (food) => {
 console.log(`ate: ${food}`);
 };
 // We can access eat within the function, but not outside.
 eat("apple"); 
 // We can also execute arbitrary code within the function (unlike using just an object to keep track of functions).
 console.log("too much foo'd"); 
}
let fooTest = new Foo();
fooTest.barf("pear");

Read more https://stackoverflow.com/a/7295712/1931185