javascript - How to Add Methods to a Function? - Stack Overflow

admin管理员组

文章数量:1356413

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.oame;
        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.oame = 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?

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?

• javascript
• oop
• function
• methods

Share Improve this question Follow edited Mar 26, 2020 at 10:13 Lloyd Dominic 80899 silver badges2626 bronze badges asked Jan 22, 2013 at 3:25 Ricky YoderRicky Yoder 57133 gold badges1111 silver badges2222 bronze badges 3

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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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.

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.

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./a/7295712/1931185

本文标签： javascriptHow to Add Methods to a FunctionStack Overflow