When function returns result and when function in JavaScript

Question

I see a lot that function returns NOT the result but the function. The example below shows that function getWindow returns function. Why it can't just return variable "win"? When I return result and when function? Thank you.

var A = function(){};
A.prototype=
{
   getWindow : function()
   {
        var win = new B.window();
        return (
                this.getWindow = function()
                {
                    return win;
                })();

   }
}

Answer 1

This code is equivalent to your code but is easier to understand:

A.prototype = {
    getWindow: function() {

        var win = new B.window();

        this.getWindow = function() {
            return win;
        };

        return win;

    }
}

Usage:

First, create an A instance:

var a = new A();

Then, call getWindow on that instance:

a.getWindow();

Here, the getWindow method of A.prototype is called. As you can see in my code above, A.prototype.getWindow will create a new B.window() and return it, however in between, it will also create a getWindow method on the instance object itself.

Now, if you call getWindow again:

a.getWindow();

A.prototype.getWindow is no longer called because the instance object itself has a getWindow method. This method returns the same "win" object that was returned when the getWindow method was called for the first time.

---

Your pattern allows for multiple A instances to use the same A.prototype.getWindow method to instantiate their own "win" objects. Consider this:

var a1 = new A,
    a2 = new A,
    a3 = new A;

a1.getWindow(); // creates window W1 and returns it
a2.getWindow(); // creates window W2 and returns it

a1.getWindow(); // returns window W1
a2.getWindow(); // returns window W2

a3.getWindow(); // creates window W3 and returns it

a1.getWindow(); // returns window W1
a2.getWindow(); // returns window W2
a3.getWindow(); // returns window W3

This is quite a useful pattern :)

---

Update:

This is your code:

return (this.getWindow = function() {
    return win;
})();

First, let's take a look at the expression inside the parens:

this.getWindow = function() { return win; }

As you can see, it's an assignment expression. An anonymous function object is assigned to the getWindow property of the object referenced by this (the instance object).

Note that this function returns the win object.

The result of this assignment expression is the function object itself! This means that the value inside the parens is the function object.

Now, let's take a look at the whole picture:

return ( the_function_object )();

We can remove the parens since we don't need them anymore:

return the_function_object();

As you can see, the function object is called, and then the return value of that function is returned.

As mentioned above, the function returns win. Therefore, the code resolves to this:

return win;

So what your code does is:

FIRST, it assigns function() { return win; } to this.getWindow.

SECOND, it returns the result of calling that function which is win.

My code produces the same result but is easier to understand:

this.getWindow = function() {
    return win;
};

return win;