JavaScript: store function in an object, but execute it in local context

Question

I have an object like this:

objectx = {
    1: {
        name: "first",
        loadFunction: function() { 
            $(target).load("http://stackoverflow.com #question", function() {
                // do something else
            });
        }
    },
    2: {
        name: "second",
        loadFunction: function() { 
            $(target).load("http://stackoverflow.com #answer", function() {
                // do something else
            });
        }
    }
}

When I call the functions with objectx[1].loadFunction(), they don't have the local context, so I would have to pass everything as argument or make my variables global. For example:

function doSomething() {
    var target; // this variable holds a reference to a DOM object

    objectx[1].loadFunction()
}

target is not defined

How do I execute the functions so that they are aware of the context they are called from?

Scimonster · Accepted Answer · 2014-07-03 09:39:23Z

1

This is impossible in JavaScript. JS uses lexical scoping. What you seem to be looking for is dynamic scope.

The best you can do is either pass arguments, define it in scope, or use a global variable (less than recommended).

answered Jul 3, 2014 at 9:39

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

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

Comments

Tomalak · Accepted Answer · 2014-07-03 09:39:26Z

1

This is not possible (the way you do it), due to how lexical scope works in JavaScript.

You want a function argument, plain and simple. Writing functions that depend on global state is bad style anyway.

var objectx = {
    1: {
        name: "first",
        loadFunction: function(target) { 
            $(target).load("http://stackoverflow.com #question", function() {
                // do something else
            });
        }
    }
}

and

function doSomething() {
    var target; // this variable holds a reference to a DOM object

    objectx[1].loadFunction(target);
}

Done.

answered Jul 3, 2014 at 9:39

Tomalak

339k68 gold badges547 silver badges635 bronze badges

3 Comments

user3653087 Over a year ago

That's how I do it now, but it requires too many arguments and makes future changes to the program difficult.

Tomalak Over a year ago

Then you have poor program structure and need to improve that. Functions with many arguments are bad style as well. Externalizing those arguments into some sort of global state is not a solution to that problem. If you explain what you're actually trying to do, I might be able to suggest an improvement.

user3653087 Over a year ago

I have several elements on my site. The program randomly selects one, looks for a suitable replacement and changes the content according to information stored in the object. Background(-color), text etc. It then fetches external content through a proxy, formats it and places it in a div inside the element. For the fetching and formatting I'm using these functions, because they need to be different for every object and it made sense to me to store them alogg with the object.

Collectives™ on Stack Overflow

JavaScript: store function in an object, but execute it in local context

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related