73

I have a jquery class within a normal class in javascript. Is it possible to access variables in the scope of the parent class from a callback function in the jquery class?

A simple example of what I mean is shown below

var simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        });
    };
};

Now in the above example, the callback function tries to access the scope of the jquery object. is there any way to access the status variable in the parent class?

0

7 Answers 7

117

You set "this" to a variable in the parent function and then use it in the inner function.

var simpleClass = function () {         
    this.status = "pending";     
    this.target = jqueryObject;     

    var parent = this;

    this.updateStatus = function() {         
            this.jqueryObject.fadeOut("fast",function () {            
                parent.status = "complete"; //this needs to update the parent class          
            });     
        }; 
    }; 
5
  • 1
    That wont work parent is in the scope of simpleClass not of the jquery object What you have to remeber is jQuery call back code is called as its own function noting to do with where it was set
    – Barkermn01
    Commented Feb 24, 2011 at 15:05
  • 7
    @Barkermn01 the variable is accessible by the powers of closures! developer.mozilla.org/en/JavaScript/Guide/Closures
    – Humberto
    Commented Feb 24, 2011 at 15:08
  • Bull the scopes, jQuery callbacks are not called in the scope of the class that defined them
    – Barkermn01
    Commented Feb 24, 2011 at 15:10
  • i know this with all call back system coz i have to add a var to the XMLHttpRequest to have another objects access inside the XMLHttpRequest i use varName.API = this; then in the callback i get the srcElement from the provided object so it's not in the global scope but still accessible
    – Barkermn01
    Commented Feb 24, 2011 at 15:16
  • 4
    @Barkermn01 It's amusing the way you are in denial. What Humberto said is correct. Give it a try.
    – d-_-b
    Commented Apr 18, 2012 at 1:09
45

I will post this answer to this old question anyway as no one yet posted this before.

You can use the bind method on your function calls to define the scope which this belongs to.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Normaly everytime you create a method - this belongs to the current scope of the function. Variables from scope2 can't see variables from scope1.

e.g.

function(){
    // scope 1
    this.baz = 'foo';

    function(){
        // scope 2
        this.baz // not defined
    };
};

with the bind method you can define the scope from this inside the function. So using .bind(this) you're telling the called function that their own scope from this is referred to the scope of the parent function, like:

function(){
    // scope 1
    this.baz = 'foo';

    function(){
        // scope 1
        this.baz // foo
    }.bind(this);
};

so in your case, this would be an example using the bind method

var simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        }.bind(this));
    }.bind(this);
};
2
  • This perfectly solves the issue when attempting to access a nested this object within a JavaScript class. Thank you!
    – KKlouzal
    Commented Jul 18, 2017 at 17:04
  • Thank you. Helped me out big time!!
    – AndyOR
    Commented Oct 14, 2019 at 11:11
12

Use an Arrow Function

An arrow function does not have it's own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules. So while searching for this which is not present in current scope they end up finding this from its enclosing scope.

Normal function syntax

function(param1, param2) {}

Arrow function syntax

(param1, param2) => {}

Usage

const simpleClass = function () {    
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() { 
        this.target.fadeOut("fast", () => { // notice the syntax here
           this.status = "complete"; // no change required here
        });
    };
};

Using an Arrow function within a ECMAScript 2015 Class

class simpleClass {

    constructor() {
        this.status = 'pending';
        this.target = jqueryObject;
    }

    updateStatus() {
        this.target.faceOut('fast', () => {
            this.status = "complete";
        });
    }
}

const s = new simpleClass();
s.updateStatus();

Described code works only in modern browsers.

0
4

By setting "this" to a variable you can access easily. Like:

$("#ImageFile").change(function (e) {
    var image, file;
    var Parent=this;
    if ((file = Parent.files[0])) {
        var sFileExtension = file.name.split('.')[file.name.split('.').length - 1];

        if (sFileExtension === "jpg" || sFileExtension === "jpeg" || sFileExtension === "bmp" || sFileExtension === "png" || sFileExtension === "gif") {
            var reader = new FileReader();

            reader.onload = function (e) {
               alert(Parent.files[0].name);
            };
            reader.readAsDataURL(Parent.files[0]);
        }
        else { alert('Wrong file selected. Only jpg, jpeg, bmp, png and gif files are allowed.'); }
    }
})
2

Sorry m8. You have to nest the reference down into the objects like so:

var simpleClass = function () {
    var _root = this;
    this.status = "pending";
    this.target = jqueryObject;
    this.updateStatus = function() {
        this.root = _root;
        _root.target.fadeOut("fast",function () {
           this.status = "complete"; //this needs to update the parent class 
        });
    };
};

notice the var _root

1
  • ok i se now that i could have used this.root.target instead of _root.target but its the same, so it doesn't matter :)
    – Tokimon
    Commented Feb 24, 2011 at 15:03
1

try this:

   var sc = (function(scc){

    scc = {};

    scc.target = jQueryObject;


    scc.stt = "stt init";

    scc.updateStatus = function(){
        var elem = this;

        this.target.click(function(){
            elem.stt= "stt change";
            console.log(elem.stt);
        })

    }

    return scc;


}(sc || {}));

you can also define your target object as private variable

1
  • Somehow, I like this way.
    – wonsuc
    Commented Apr 3, 2019 at 6:21
0

You can mantain state using closure variables:

function simpleClass() {
   var _state = { status: "pending", target: jqueryObject; }

   this.updateStatus = function() {
      this.target.fadeOut("fast",function () {
         _state.status = "complete"; //this needs to update the parent class 
      });
   }
}

// Later...
var classInstance = new simpleClass();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.