Question

I am currently reading the book “Javascript: The Good Parts” and was playing with Functions.
I produced a test script to test some properties and I am somewhat confused by the results.
Here is the code:

<h3>Object</h3>
        <div style="padding-left: 10px;">
            <script type="text/javascript">
                function outterF()
                {
                    document.writeln("outterF.this = " + this + "<br>");

                    function innerF() 
                    {
                        document.writeln("innerF.this = " + this + "<br>");
                        return this;
                    };

                    var inner = innerF();
                    return this;
                }

                document.writeln("<b>From Inside:</b><br>");
                var outF = outterF();
                var inF = outF.inner;

                document.writeln("<br>");
                document.writeln("<b>From Outside:</b><br>");
                document.writeln("outterF.this = " + outF + "<br>");
                document.writeln("innerF.this = " + inF + "<br>");
            </script>
        </div>

Result is:

Object
From Inside:
outterF.this = [object Window]
innerF.this = [object Window]

From Outside:
outterF.this = [object Window]
innerF.this = undefined

Notice that outF.inner returns “undefined”, is that some kind of a language bug?
Obviously, outF.inner points to Window object that has nothing to do with my object but shouldn’t it be at least pointing to a Function object instead?

Thanks
-Assaf

Answer 1

This is how the value of this is determined.

// function case
foo(); // this inside foo will refer to the global object

// method case
test.foo(); // this inside foo will refer to test

// constructor case
new foo(); // this inside foo will refer to the newly created object

So unless you deal with a method or a constructor this is rather useless.