Question

I’m trying to access a field of a constructor from a nested function.

Here is my code:

var Box = function() {
  this.div = $("div#mydiv");
  this.guide = {
     div: $("div#mydiv2"),
     scroll: function() {
        $(document).scrollTo(this.div); //Want to scroll to mydiv2
        alert(Box.div.attr("id")); //Want to alert mydiv id
                                   //How do I access the div field of the Box constructor?
     }
  }
}

if I call the scroll method like this:

var a = new Box();

$("#button").click(function() {
a.guide.scroll();
});

Box.div is returning as undefined.

If I try to alert the id of the div property inside the scroll method as this.div it will use the div property inside the guide object. I’ve tried referencing the div field outside the guide object by using Box.div but this does not work. Please help me figure this out.

Answer 1

Add this to the first row of the Box function:

var Box = function() {
    var self = this;

Then in the alert, use self instead of this as this is not referring to the top level function (box).

$(document).scrollTo(self.div);