this scope inside object literal

Question

how to simply make a reference to this (the obj) in this simple example? (and in this exact case, using obj. literal)?

http://jsfiddle.net/YFeGF/

var obj = {

  planet : "World!",    // ok, let's use this planet!
  text : {
       hi: "Hello ",
       pl: this.planet  // WRONG scope... :(
  },
  logTitle : function(){                               
     console.log( this.text.hi +''+ this.planet ); // here "this" works !
  }

};


obj.logTitle(); // WORKS! // "Hello World!"
console.log( obj.text.hi +''+ obj.text.pl ); // NO DICE // "Hello undefined"

I tried also making that : this, but again that is undefined inside the inner object

when `pl: this.planet` is executed the execution scope is the scope of the method creating `obj` so `this` points to the creator context... — Arun P Johny, Sep 10 '13 at 03:20
Property access doesn't do anything with scope, only method calls change `this`. (Or `Function.apply()`, `Function.call()`, and indirectly `Function.bind()`.) You "inherit" the `this` of the outer context. — millimoose, Sep 10 '13 at 03:20
I know but... even if I create a function like `that : function(){ return this; },` inside the inner `text{}` object - `that` is still undefined... `this` is really driving me crazy... :( — Ginnani, Sep 10 '13 at 03:23
You **CAN'T** refer to a property of `obj` before `obj` is initialized, so you may have to initialize `obj` first then add property like `obj.text.pl = obj.planet` — jasonslyvia, Sep 10 '13 at 03:39
I'm not sure what you're trying to achieve, but if you can directly get a reference of `obj.planet`, why would you try to access the same object using `obj.text.pl`? — Nasser Al-Shawwa, Sep 10 '13 at 03:42

score 4 · Accepted Answer · answered Sep 10 '13 at 11:56

4

Do not use object literal, use function approach,

var Obj = function(){
  var self = this; //store self reference in a variable
  self.planet = "World!",    // ok, let's use this planet!
  self.text = {
       hi: "Hello ",
       pl: self.planet 
  };
  self.logTitle = function(){                               
     console.log( self.text.hi +''+ self.planet ); 
  }
};

var obj = new Obj();
console.log( obj.text.hi +''+ obj.text.pl );
obj.logTitle();

Here is working jsfiddle : http://jsfiddle.net/cettox/RCPT5/.

Read this great MDN article on Object Oriented Javascript too.

answered Sep 10 '13 at 11:56

Kemal Dağ

2,743
21
27

Does this pattern have a name? I have seen it used (and this is a nice example) but I can't recall if it has a specific name. – BenM Sep 10 '13 at 11:58
@BenM it's a constructor. – Björn Roberg Sep 10 '13 at 11:59
Sorry I should have been more specific. I meant the act of assigning "this" to a variable such as "self" or "that" and using the variable to give access to the closure of the top level function, to functions defined within the top level function. – BenM Sep 10 '13 at 12:03
@Benm I am not aware of any naming for this approach, I have also seen it in action and adopted very quickly, since it solves the problem of losing this keyword's scope on newly created anonymous functions. – Kemal Dağ Sep 10 '13 at 12:06

this scope inside object literal

1 Answers1