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
– David Knipe, Commented Feb 18, 2014 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
– StackSlave, Commented Feb 18, 2014 at 23:46

Felix Kling · Accepted Answer · 2014-02-19 00:12:35Z

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, 2014 at 0:12

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user13500 Over a year ago

And with his current code displayTypes would not be part of DP.prototype., or am I missing something?

Felix Kling Over a year ago

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.

Jers Over a year ago

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?

Felix Kling Over a year ago

@jers: see stackoverflow.com/questions/310870/…

Maksim Gladkov · Accepted Answer · 2014-02-18 23:34:01Z

0

Have you tried to add it like this:

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

answered Feb 18, 2014 at 23:34

Maksim Gladkov

3,0791 gold badge17 silver badges16 bronze badges

2 Comments

Jers Over a year ago

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).

Maksim Gladkov Over a year ago

Oh, I got it know. Let me think about it :)

Community · Accepted Answer · 2017-05-23 10:31:56Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered Feb 19, 2014 at 0:13

HMR

39.5k26 gold badges99 silver badges175 bronze badges

Collectives™ on Stack Overflow

Add property to object inside function in JavaScript?

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related