Question

I have a constructor object. Inside this constructor i have two functions. One is called window.onresize and the other one is onBrowserResize. Now i want to call onBrowserResize inside the window.onresize function. How do i do this?

function MyObject() {
    window.onresize = function(event) {
        this.onBrowserResize();
    }

    this.onBrowserResize = function() {
    }
}

I would like to have the function public so i can call it like this: object.onBrowserResize();

If I make the function private like this: var onBrowserResize = function() then I cannot access it outside the scope.

Anyone has an idea how to do it? I’m probably just a bit confused about the scoping in objects.

Answer 1

In JavaScript, the value of this is determined depending on how the function is called. See the MDN article on this for details.

Your question is missing some details. My answer is assuming you have something like this:

var MyObj = function() {
    window.onresize = function(event) {
        this.onBrowserResize();
    }

    this.onBrowserResize = function() {}
}

Which is instanced like this:

var myObj = new MyObj();

Here are some of ways to achieve that.

1. Just passing this.onBrowserResize as the event handler (the simplest way to go, if all your onresize handler does is call onBrowserResize):

var MyObj = function() {
    window.onresize = this.onBrowserResize;
    this.onBrowserResize = function() {
        // caution: "this" here won't be your object.
        // use option 3 below if you need this to be your object
    }
}

2. Caching a reference to the local this:

var MyObj = function() {
    var that = this;
    window.onresize = function(event) {
        that.onBrowserResize();
    }

    this.onBrowserResize = function() {}
}

3. Fixing the value of this with Function.prototype.bind:

var MyObj = function() {
    window.onresize = this.onBrowserResize.bind(this);

    this.onBrowserResize = function() {}
}