In this code when we create an object of "Employee" using "new Employee()", "calculateBonus" function is executed while creating the object. When "calculateBonus" is executed, we alert the reference of this, the output of the alert gives a "Window" reference. So "this.salary" in "calculateBonus" function binds salary to window object.

Why the "calculateBonus" function executed under the context of "Windows" and not in context of "Employee"

What I have tried:

I am trying to figure out how to resolve the scope problem for this issue. Please help me in understanding the concept.

In this case, when you call the calculateBonus function, it doesn't have an explicit context. If you were using strict mode[^], then within the function, this would be undefined. But, since you're not using strict mode, the older rules apply, and this automatically resolves to the global context.

You can work around that using either call[^] or apply[^] to pass in the context:

I 5ed the answer, but did not read the articles you referenced. I did not like what I read before on the topic; it's not so clear or helpful.

At the same time, "this" can be understood very easily by one approach which is psychologically somewhat difficult to many, including myself. One would need to clear one's mind from thinking of JavaScript as of "traditional" OOP system with classes. It's very important to understand that JavaScript programming with prototypes and constructors is very far from the illusionary similarity with OOP: none of those concepts are analogous to classes or class instance constructors; in JavaScripts they are... much simpler. It's really all about objects, not types (the JavaScript concept of type is another non-analogous concepts; and the prototypes are just object prototypes, and constructors are just "normal" functions with "this".

I hope you will like my other answer, Solution 2, more exactly, another reference to the article about the "distractions". :-)

Your idea that "this" is related to the scope is wrong. It is totally irrelevant to the scope.

It is related to the concept of the relationship between an object having property and an object used as a property. Note that 1) a function is also an object, 2) and this object can be a property; in this case, "this" is actually passed as an argument.

It you understand that and dismiss your scope misconception, you can probably easily understand the rest. I describe the functioning of "this" in Solution 6.

Let's assume you are using strict mode in all cases. Non-strict behavior is too confusing to use during development. In your original code, alert would show the window object, which is plain wrong (or, those obsolete wrong decisions!) and hard to recognize what is that. I output this.name only to show some evidence that this is correct "this". (In the style of the sayings by Rabbit from Miln's Winnie-the-Pooh: "'this' can be different!". :-))

Of course, in this particular piece of code, making calculateBonus would be utterly impractical, because this is not what you meant to do; you probably did not want to expose this function to the object users. I'm pretty much sure that you knew the practical solution; only it would be not useful to uncover the "mystery" of "this". So, just in case:

I hope that you can see how this code is silly. If this is used as a constructor (a), return 14 is not used. If it is as not a constructor call (b), "this" is pointless. However, all this will work in non-strict mode. Some say it's nice, but it won't detect the silliness of this code. Switch to the strict mode and, for a first attempt, comment out the last line (b). Still, it will work.

Uncomment the last line. In want line the problem will be detected. Surprise: in the line "this.A =…": "this is undefined". Note that the problem only exists if the last line is there.

Wait a minute! Isn't JavaScript an interpreter? No, it is not a pure interpreter. The script is first lexically analyzed. Another surprise? :-)

Because if non-strict mode. This is just weird obsolete behavior. In strict mode, it's always "undefined" object.
Isn't it obvious why it is undefined? Why should it be anything else? "this" is hidden function parameter, which is missing in this case.
—SA

What I assume is that the code "new Employee()" is called from the global scope. While the global scope is executing the specified steps, it encounters a function "calculateBonus". The function is now executed under the global context since the new object is still not created.

So when this function is executed from the global scope, therefore the context of function execution becomes "global" and therefore "alert(this)" gives "window" object.

Please tell me if my assumption is correct or not. Or there is some problem in understanding the scope resolution for this function.

Not true. There is no such thing as "assign this". "This" and "object" is the same. Return "this" is... well, not accurate. To check up up, write "return 3" at the end. You will see that the instance is still returned via new Employee(); that is, there is a separate mechanism for returning a result of construction. There are two ways too call a function f(): var a = f() and var a = new f(). In second case, return is ignored and newly constructed object is taken. "this" is only a name for the object passed to a function. In your case, nothing is passed.
—SA

Solution 6

Thanks for the reply sir. Its great to see the workarounds for the code I wrote in order to execute it as expected.

Thanks a lot....

But I would also like to know why the above code is Alerting me with the "Window" Object instead of Employee Object

Please see my comment to that question. I though this is obvious.

I already explained that Window Object is the weird artifact of action of the obsolete and unreasonable behavior of JavaScript non-strict mode. You probably understand that the backward compatibility for JavaScript is very serious. This is the only language supported by all browsers. That's why strict mode was created — see Solution 2 and the link. In strict mode, the object "this" is the "undefined" object. By the way, this is a special unique predefined object of the special type "predefined" (not "object"). In strict mode, "this" also can be the reference to the current window object, but only when it is strictly so, when a function is really a property of this object, but to understand it, we will need to discuss it later.

From this point, let's discuss only the cases when strict mode is used, for strictness. :-)
The keyword "this" is used as an argument of a function used inside the implementation of this function, nothing else. So, you need to understand that "this" is a keyword used to access an actual argument of a function. This is a special function argument passed to the function implicitly, not explicitly, that is, it is never appears in an formal argument list. But this argument may or may not be actually passed. It is passed only in some cases:

When a function is called via new operator. In other words, when it is used as a constructor.

When a function object is called as a property of some object.

[EDIT]

Last item of the above list should be understood "dynamically". It does not really matter if some function object is used as a property, it only matters if the function is called via this property or not. Compare:

As always with JavaScript, if you use some undefined object name is, say, assignment to some variable, this variable starts to reference undefined. This is exactly what happens if this is not actually passed at all. In your case, the function is a local function object; that is, a stack variable. None of the mechanisms which could pass this applies.

Finally, there is one marginal case of this object: use it on the top-level script. Let's say, you don't have any functions at all in your whole page. What is this? It's easy to try. It will reference current window object, in both strict and non-strict modes. It tells you that the top-level script is actually always a function; the JavaScript runtime passed the current window object as this argument to it.

If you don't mind, Can I ask if the "Solution 5" can be taken as a semi valid reasoning for the above problem I specified even if we consider that it behaves in strange manner in Browser without strict mode.

So the code, "new Employee()" is called from the global scope. While the global scope is executing the specified steps, it encounters a function "calculateBonus". The function is now executed under the global context since the new object is still not created.

So when this function is executed from the global scope, therefore the context of function execution becomes "global" and therefore "alert(this)" gives "window" object.

Please tell me if my assumption is correct or not. Or there is some problem in understanding the scope resolution for this function.