Add property to object inside function in JavaScript?

Question

Would there be any way, to add another property to this object inside this function (used as a class):

function DP() {
    var _this = this;

    this.displayTypes = {
        normal: function(div) { _this.displayNormal(div) },
        round: function(div) { _this.displayRound(div) }
    }

    this.displayNormal = function(div) { ... };
    this.displayRound = function(div) { ... };

    this.display = function(div, type) {
        this.displayTypes[type](div);
    }
}

var dp = new DP();

// Now here I'd basically like to add another property to the DP.displayTypes
// called "rect" referencing to a function in a different class called
// DPExtension.displayRect(). So something like this:
//     rect: function(div) { DPExtension.displayRect(div) }

So that I could call a dp.display("place-to-display", "rect") and that it would then execute displayRect("place-to-display") from the DPExtension class/function basically, whilst calling something like dp.display("place-to-display", "round") would execute a displayRound("place-to-display") from DP instead.

How does one do that? I tried doing some things with prototype but to no avail...

If `displayRect` is a method and not just a function, then you need to mention the object it is attached to somewhere in your code. — David Knipe, Feb 18 '14 at 23:37
If you create another function separate from your `DP` function, (outside it) the `this` value inside that function will refer to it. — StackSlave, Feb 18 '14 at 23:46

score 2 · Accepted Answer · answered Feb 19 '14 at 00:12

2

Since it seems like you want changes to displayTypes to be shared by all instances of DP, you should make it shared by all instances and not instance specific. You could do this by making it a static property of DP:

function DP() {
    // these should probably go on DP.prototype as well
    this.displayNormal = function(div) { ... };
    this.displayRound = function(div) { ... };
}

// static
DP.displayTypes = {
    normal: function(div) { this.displayNormal(div) },
    round: function(div) { this.displayRound(div) }
};

DP.prototype.display = function(div, type) {
    this.displayTypes[type].call(this, div);
};

DP.prototype.displayTypes = DB.displayTypes;


// somewhere else
DP.displayTypes.rect =  DPExtension.displayRect;

You don't have to create a static property all, you could define displayTypes directly on the prototype, but extending it via DB.displayTypes.foo = ... reads a bit nicer than DB.prototype.displayTypes.foo = ....

answered Feb 19 '14 at 00:12

Felix Kling

795,719
175
1,089
1,143

And with his current code `displayTypes` would not be part of `DP.prototype.`, or am I missing something? – user13500 Feb 19 '14 at 00:26
Yep, exactly. It doesn't have to be on `DP.prototype` to make it shared between instances, but that's the more natural way to do it. – Felix Kling Feb 19 '14 at 00:42
This worked, thanks for that but can you or someone else explain to me **why** using `prototype` is the better option over defining it inside the `DP` function? – Jers Feb 19 '14 at 12:11
@jers: see http://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript – Felix Kling Feb 19 '14 at 16:39

score 0 · Answer 2 · answered Feb 18 '14 at 23:34

0

Have you tried to add it like this:

var dp = new DP();
dp.displayTypes['rect'] = function(div) { DPExtension.displayRect(div); };

answered Feb 18 '14 at 23:34

Maksim Gladkov

3,051
1
14
16

Yes, and that does indeed work, but now you are only modifying the `displayTypes` that is already in `dp`. So if you would say for example make another variable called `second-dp` and equal it `new DP();` it doesn't have the modified `displayTypes` in it, which is what I'm looking for (my apologies if that wasn't made clear enough in the OP). – Jers Feb 18 '14 at 23:39
Oh, I got it know. Let me think about it :) – Maksim Gladkov Feb 18 '14 at 23:41

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

I think you can change DP to have a display type object when you create DP and pass current instance of. DP when creating a display type.

Put the methods of DP on DP.prototype. and the methods of DisplayTypes on DisplayTypes.prototype adding methods later would affect all instances, future and already created.

About prototype:https://stackoverflow.com/a/16063711/1641941

edited May 23 '17 at 10:31

Community

1
1

answered Feb 19 '14 at 00:13

HMR

37,593
24
91
160

Add property to object inside function in JavaScript?

3 Answers3