How to call parent functions from inner nested function?

Question

I have a simple jQuery ready event that initializes a view by calling the a function in the setupView object.

The question I have is, what is appropriate way to call the function setSomethingImportant from the init function as shown below?

Since the call is made from a different execution context than the init function, this.setSomethingImportant() does not work. However it works if I use setupView.setSomethingImportant(). The problem I have with this is that if the var name (setupView) changes, I will have to change the body of the code as well.

 (function() { 
 $(document).ready(function() { 
 setupView.init(); 
 }); 
 var setupView = { 
 currentState : "CT", 
 init : function () {
 $("#externalProtocol").change( function () {
 console.log("Changed =" + $(this).val());
 setSomethingImportant(); 
 // Question ? how to call a method in the setupView object 
 }); 
 }, 
 setSomethingImportant : function () {
 this.currentState="TC"; 
 console.log("Something has changed :" + this.currentState );
 } 
 } 
 }(jQuery);

Answer 1

Store this into a variable:

var setupView = {
 currentState: "CT",
 init: function() {
 // Keep a reference to 'this'
 var self = this;
 $("#externalProtocol").change(function() {
 console.log("Changed =" + $(this).val());
 // Use the old 'this'
 self.setSomethingImportant();
 });
 },
 setSomethingImportant: function() {
 this.currentState = "TC";
 console.log("Something has changed :" + this.currentState);
 }
};

See the Working demo.

• Rocky: Thanks @Florent. To be honest I have been using the approach you suggested. But I was not sure if storing "this" in a variable is a best practice.
• Florent: Sometimes you don't have the choice. The less you use this trick, the cleaner your code will be.

Answer 2

Just declare the function separately and then call like so:

function setSomethingImportant(context) {
 context.currentState="TC"; 
 console.log("Something has changed :" + context.currentState );
};
(function() { 
 $(document).ready(function() { 
 setupView.init(); 
 }); 
 var setupView = { 
 currentState : "CT", 
 init : function () {
 $("#externalProtocol").change( function () {
 console.log("Changed =" + $(this).val());
 setSomethingImportant(this); 
 // Question ? how to call a method in the setupView object 
 }); 
 }, 
 setSomethingImportant : function () {
 setSomethingImportant(this);
 } 
 } 
}(jQuery);

• user1106925: You're still passing the wrong context from within the change handler.

Answer 3

Please note that I changed my original solution. I am now passing data to the event handler using even.data.

(function() { 
 $(document).ready(function() { 
 setupView.init(); 
 }); 
 var setupView = { 
 currentState : "CT", 
 init : function () {
 $("#externalProtocol").change({ _this: this }, function (event) {
 console.log("Changed =" + $(this).val());
 event.data._this.setSomethingImportant(); 
 }); 
 }, 
 setSomethingImportant : function () {
 this.currentState="TC"; 
 console.log("Something has changed :" + this.currentState );
 } 
 } 
 }(jQuery);