Encapsulating functions and variables in an object with object-wide variables

Question

So, I want to create an object that can contain functions and variables and objects containing functions and variables, but I find that if there are "top-level" variables, they can't be accessed by deeper functions due to scoping rules. For example:

var myobj = {
    foo: "test",

    bar: function() {
        return this.foo;
    },

    baz: {
        piz: "test2",
        poz: function() {
            return this.piz + this.foo;
        }
    }
}

console.log(myobj.bar());
console.log(myobj.baz.poz());

The second call return "test2undefined" for obvious reasons - this.foo refers to baz.foo (which is undefined) and not myobj. How can I reference myobj to allow the variable foo to be available everywhere in this object?

The second one should not throw any errors though. FWIW, this doesn't have anything to do with scope and you can't make this refer to two different objects. Maybe if you explain your real-world issue, we can provide useful solutions. — Felix Kling
– Felix Kling, Commented Apr 28, 2014 at 12:17
Ah yes, sorry, I tweaked my code but forgot to update. I'm just interested in the kind of best practice approach - I have an object, which I want to have some properties that are accessible everywhere in other functions, functions within objects, and so on - I don't really have an example of an application, it's more just trying to work out how to structure my code, if that helps! — njp
– njp, Commented Apr 28, 2014 at 12:22

Amit Joki · Accepted Answer · 2014-04-28 12:24:35Z

1

You can modify your poz() to:

poz: function() {
  return this.piz + myobj.foo;
}

this cannot refer two objects. So I'm just using the myobj.foo.

You wanted to refer myobj when you were using this at that particular line, I suppose, so why not use the object's property?

Note that you can always refer any property by referring it by the original object's name anywhere in the code.

edited Apr 28, 2014 at 12:24

answered Apr 28, 2014 at 12:19

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

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

5 Comments

njp Over a year ago

I see, because myobj exists at that time, I can refer to it inside its definition? The other solution I saw was that I can assign a variable such as self: this; in the object literal notation, and use self to refer to the "top level" - do you know which method is generally more acceptable?

Amit Joki Over a year ago

I think my answer is more acceptable, as you can't be sure what this refers to.(You can be, but only if you are an expert of js). So just use the property by referring to the original object ;)

Amit Joki Over a year ago

@njp, BTW, I don't think I'm good in js. Scopes really need some time to be understood ;)

Felix Kling Over a year ago

@njp: "The other solution I saw was that I can assign a variable such as self: this; in the object literal notation" This doesn't work though, so you don't even have to consider it as a solution.

Amit Joki Over a year ago

@FelixKling, please use @ ;)

Łukasz Szewczak · Accepted Answer · 2014-04-28 12:33:52Z

1

You can change baz to function and remember current context

var myobj = {
    foo: "test",

    bar: function() {
        return this.foo;
    },

    baz:function() {
      var me = this;   

     return {    
        piz: "test2",
        poz: function() {
            return this.piz + me.foo;
        }
     }
    }
}

console.log(myobj.baz().poz());

answered Apr 28, 2014 at 12:33

Łukasz Szewczak

1,8911 gold badge13 silver badges14 bronze badges

Comments

throrin19 · Accepted Answer · 2014-04-28 12:20:02Z

0

Your error is normal. In your poz function, this reference of baz object. Not to myobj.

To change poz function, you shoud pass context on your function like this :

var myobj = {
    foo: "test",

    bar: function() {
        return this.foo;
    },

    baz: {
        piz: "test2",
        poz: function(ctx) {
            return this.piz + ctx.foo;
        }
    }
}

console.log(myobj.baz.poz(myobj));

it's not the great solution but, in this case, it's the easyer.

answered Apr 28, 2014 at 12:20

throrin19

18.2k4 gold badges34 silver badges52 bronze badges

Comments

Artem Petrosian · Accepted Answer · 2014-04-28 12:33:35Z

0

Basically if you want to access some property inside the object, you should use var keyword to declare it.

I've modified a little bit your example:

function MyObj() {
    var foo =  "test";

    this.bar = function() {
        return foo;
    };

    this.baz = {
        piz: "test2",
        poz: function() {
            return this.piz + foo;
        }
    }
}

myobj = new MyObj();

console.log(myobj.bar());
console.log(myobj.baz.poz());

answered Apr 28, 2014 at 12:33

Artem Petrosian

2,9541 gold badge24 silver badges30 bronze badges

Collectives™ on Stack Overflow

Encapsulating functions and variables in an object with object-wide variables

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related