Is my understanding of JavaScript `this` correct?

Question

Given the following snippet copied from a well known question on this site:

x = 9;
var module = {
    x: 81,
    getX: function () {
        return this.x;
    }
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, because in this case, "this" refers to the global object

// create a new function with 'this' bound to module
var boundGetX = getX.bind(module);
boundGetX(); // 81

My logic to understand this is:

• Since the (first) getX belongs to the module object, it cannot be seen without the prefix module., so everyone knows that it should be module.getX()
• But what causes confusion is that this of the (first) getX will also reference the pointer calling the (first) getX function. I'm not sure about whether my wording is correct.
• When I define the second (pointer to) function by var getX = module.getX, it helps us to keep seeing the first getX inside/of module.

But, since most people (in the past) didn't know about the second point, i.e. the pointer used when calling the function matters, i.e.

// the second getX() in the above example.
getX()
// is equivalent to:
globalPointer.getX()

and since the global x = 9 is belongs to the globalPointer, so the result is 9 instead fo 81.

Please help me check about my understanding, either the correct wording or the real logic behind the scene are welcome.

Answer 1

Since the (first) getX belongs to the module object, it cannot be seen without the prefix module., so everyone knows that it should be module.getX()

This is inexact. The getX function does not belong to the module object. Rather the module object has a property named getX which refers to the function object named getX. The getX function object has no information about where it is stored.

When the object intializer for module is compiled, the anonymous function value used to initialize module.getX is automatically named after the property being initialized. This is how the getX function object gets a name property set to "getX".

---

But what causes confusion is that this of the (first) getX will also reference the pointer calling the (first) getX function.

The this value seen by code inside a function is generally determined at run time by the JavaScript engine (at compile time for arrow functions), and provided in scope chain records of the function when called - meaning this is NOT passed to the function as an argument. Hence the first call to getX

module.getX()

is compiled into

• get the value of module

• call getX and pass it module as its this value.

  Moved from comment:
  Using extra words, when executing module.getX(), a this value of module is passed to getX in its environment records, not as an argument.

and

var getX = module.getX

creates a global variable called getX and sets its value to the function object reference held in module.getX. When the global variable getX is called, the run time engine passes the global object as the this value seen by getX when it runs.

---

When I define the second (pointer to) function by var getX = module.getX, it helps us to keep seeing the first getX inside/of module.

Only in the sense of looking at the initializer for module to see the source code of getX. The global variable points to a function object named getX and module.getX independently points to the same function object. However, modifying values of module.getX and var getX don't affect each other.

---

See Also

• MDN for researching web development in general,
• Object initializer reference on MDN,
• Inferred Function Names on MDN,
• Related question Why do anonymous function in JavaScript have names?.