Javascript: Global Context and Function Context Declarations

Question

I have noticed something while playing around which has sparked a quick question.

When code is executed in the global/window context, any function declarations get added as methods to the window object.

But when I am in the context of another object, writing a function declaration does not add the method to my objects methods.

function functionInGlobalCtx() { // This will be added as a function to the window object
  // code...
}

var myObject = {};

myObject.myObjectFunction = function () {

    var $this = this; // The context here is the 'myObject' object

    function functionHopefullyInMyObjectCtx() {
        // code...
    }
}

myObject.myObjectFunction();

Why does the function declaration exist as part of the window object but not the one for the object?

Is this simply 'how JavaScript works' (special rules apply to the global context?) or am I missing something?

Thanks.

Answer 1

All functions declared globally will be attached to the global window object. That's how JavaScript works.

JavaScript only has function scope. So any function declared inside another function is private to the outer function.

The function functionHopefullyInMyObjectCtx can not be accessed from outside yet.

myObject.myObjectFunction = function () {
    var $this = this;
    function functionHopefullyInMyObjectCtx() {
        // code...
    }
}

Declaring a function inside a function does not attach it to the this automatically. However the function remains private and is only accessible within the scope it was declared in.

If you wanted to access the functionHopefullyInMyObjectCtx function from myObject.myObjectFunction then here is a way:

var myObject = {};

myObject.myObjectFunction = function () {
    return {
        functionHopefullyInMyObjectCtx: function() {
            console.log('I got called');
        }
    }
}

obj = myObject.myObjectFunction();
//obj now has ref to the inner function
obj.functionHopefullyInMyObjectCtx();

I got called

Here is a good read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions

Answer 2

Its actually understandable. Function is object. Myobject and myobjectfunction are two different objects. So are 'this' and function itself.

In your example, you define the hopefullyfunction in myobjfunction, not in myobject.

Answer 3

I believe I have found the answer I was looking for.

Why are variables automatically assigned to the global/window object?

Because the JavaScript engine keeps a 'global environment record' of the items declared within the global scope (just like all scopes have an environment record holding all declaration information), but the difference between the global environment record and normal scope environment records is that the engine makes this record accessible within code (not just for engine internal use), through the window object!

If I am wrong or it's not quite right, please go ahead and correct me.

Thank you for your help.

https://es5.github.io/x10.html#x10.2.3

Difference between variable declaration syntaxes in Javascript (including global variables)?