Referencing parameters inside variables in jQuery

Question

just interested in jQuery / Javascript and refers to options in variables.

So, I wrote a small plugin that, when I call "populate", will fill in some text. Very simple. Here is what I am trying to do:

var foo = { msg1: "Hey", msg2: this.msg1 + "how", msg3: this.msg2 + "are", msg4: this.msg3 + "you", msg5: this.msg4 + "doing", msg6: this.msg5 + "today" } 

$("#bar").populate({text: foo.msg6});

So, when the .populate plugin is called, #bar will add “Hey, how are you.”

The completed plugin is hard to explain, but trust me that it works great, not the problem. I'm just wondering if such an organization of variables and parameters is possible, since it seems to be cleaner, more “semantic” and more organized for me than just a set of variables related to other variables ...

Hope I make sense! Thanks everyone!

Answer 1

this only makes sense in the execution context . When you define a function, a scope chain is created for this function, which will be used whenever this function enters the current execution context. When this happens, this will be determined (at runtime). See more details.

In your example, you are not defining any new scope chains because you are not creating any methods for your object. Therefore, when you refer to this , you refer to all this when you make your foo object. Most likely, you work in a global space, so this will be window (if you are in a browser), but it may be another object with a function in which you are currently executing. For instance:

  var myScopeObj = { myMethod: function() { var foo = { msg1: "Hey", msg2: this.msg1 + "how", msg3: this.msg2 + "are", msg4: this.msg3 + "you", msg5: this.msg4 + "doing", msg6: this.msg5 + "today" }; var foo2 = foo.msg6; } }; 

There are several possibilities in the above example:

  myScopeObj.myMethod(); // 'this' refers to myScopeObj 

or

  var method = myScopeObj.myMethod; method(); // 'this' refers to window 

or

  myScopeObj.myMethod.call(window); // 'this' refers to window 

What you can do is use the constructor function for your object and use this to map properties.

  function Foo() { this.msg1 = "Hey"; this.msg2 = this.msg1 + "how"; this.msg3 = this.msg2 + "are"; this.msg4 = this.msg3 + "you"; this.msg5 = this.msg4 + "doing"; this.msg6 = this.msg5 + "today"; }; var foo = new Foo(); $("#bar").populate({text: foo.msg6}); 

Answer 2

In the definition of an object like yours, this does not apply to the object itself, so declaring the object will not do what you want.

In fact, in this example code , you can see that this in this object definition has a window object, which is what the javascript interpreter sets it when there is no other value that it should have.

I don’t understand why you are trying to do what you are doing (therefore, I cannot offer better alternatives), but you could end up with a desired foo object like this using the init() method

 var foo = { msg1: "Hey", init: function() { this.msg2 = this.msg1 + "how"; this.msg3 = this.msg2 + "are"; this.msg4 = this.msg3 + "you"; this.msg5 = this.msg4 + "doing"; this.msg6 = this.msg5 + "today"; } } foo.init(); $("#bar").populate({text: foo.msg6}); 

or you can use this with the constructor function:

 function Foo() { this.msg1 = "Hey"; this.msg2 = this.msg1 + "how"; this.msg3 = this.msg2 + "are"; this.msg4 = this.msg3 + "you"; this.msg5 = this.msg4 + "doing"; this.msg6 = this.msg5 + "today"; } var foo = new Foo(); $("#bar").populate({text: foo.msg6});