CODEWITHSUNDEEP
javascriptoopfunctionmethods
Ricky Yoder
Ricky Yoder

Reputation: 571

How to Add Methods to a Function?

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?

Upvotes: 2

Views: 14620

Answers (3)

Kelton Temby
Kelton Temby

Reputation: 875

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

Upvotes: -1

Arun P Johny
Arun P Johny

Reputation: 388316

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.

Upvotes: 5

Oved D
Oved D

Reputation: 7442

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.

Upvotes: 1

Related Questions