如何向函数添加方法？

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 (eg 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?

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, da 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 .

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.