What is “this” in JavaScript?
“this” is a reserved keyword in JavaScript and its value is determined by how a function is called. According to MDN the value of “this” is “A property of an execution context (global, function or eval) that, in non–strict mode, is always a reference to an object and in strict mode can be any value.”
Value of “this” in Global Context (Default Binding)
In global context (ie., ‘this’ is outside a declared object), the value of “this” is the GLOBAL object (window if in the browser) or UNDEFINED in the STRICT MODE.
Now let us look at this function which is not inside of a declared object:
In the above function, the value of ‘this’ is again the GLOBAL OBJECT (‘window’ object inside a browser) as it is not inside of a declared object.
The value of “this” in STRICT mode is UNDEFINED:
Value of “this” in object context (Implicit Binding)
If “this” is found inside a declared object, the value of “this” is always the closest parent object.
In the above code “this” is inside the object dog, therefore the value “this” will be the object dog.
Let us look at another example:
In the above example we added another object “master” inside of dog object and the value of ‘this’ changed because now “master” is the closest parent object and hence when we call dog.master.greetpet(), the output returned as “Hello undefined”. And the dog.master.findThis() returns false as dog object is no longer the “this”. The value of “this” is now the master object.
Changing “this” using explicit binding
We can change the value of “this” using the three function methods, namely, call(), apply(), and bind().
Call() method
The first argument to the call() method is whatever you want the value of the “this” to be and this is usually called ‘thisArg’. The call() method calls a function with a given this value and arguments provided individually.
The arguments after ‘thisArg’ are any parameters that you want to pass to the function which you are changing the context of keyword ‘this’ inside of. And since a function can have any number of arguments, the arguments are separated from one another with a comma. When the call() method is used on a function, that function is immediately invoked.
Now let us look at the same example as above, but this time calling the function using call() method:
When we invoke the greetPet() function, the first parameter to call() method is what we want the keyword ‘this’ to refer to. In the above code, we are setting the value of ‘this’ to be dog object. Now you can see from the output that it is no longer “undefined”.
Apply() method
The syntax of apply() method is same as call() method except that call() accepts an argument list, while apply() accepts a single array of arguments.
And like call() method, when apply() method is used on a function, the function is invoked immediately.
In the above code, we use apply() method to set “this” to dog1 or dog2.
Bind() method
Bind() method is like call() method except that instead of invoking the function immediately, it returns a function definition. According to MDN “The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called”.
Bind can be used to set the context of “this” for a function that will be called at a later point in time, like setTimeout() method.
In the above example, “this” is inside a declared object dog, but since the setTimeout() function is called at a later point in time, the keyword “this” does not refer to the parent object, it actually refers to the GLOBAL object which is the WINDOW object. Hence dog.Hello() returned “Hello undefined”. We lost the context of the keyword “this” in this example. We can use bind() method to set the keyword “this” to the dog object.
We passed “this” as the first argument to the bind() method, and that is because inside of dog object, the keyword “this” refers to the dog object.
Using the keyword “new” to set the value of “this”
The new keyword does the following things:
o Creates a blank, plain JavaScript object;
o Links (sets the constructor of) this object to another object;
o Passes the newly created object from Step 1 as the “this” context;
o Returns “this” if the function does not return an object.
In the above example, the keyword “this” inside the function is not part of a declared object, hence its value refers to the GLOBAL OBJECT which is the WINDOW object in this case.
The value of keyword “this” changes when we use the “new” keyword. The value of “this” refers to the object that is created when the “new” keyword is used. We stored the value of the object in the variable oscar and used it to access the firstName, breed, and age properties on it.
Summary
The keyword “this” is a reserved keyword and its value is determined at execution.
It is set either using GLOBAL context or OBJECT BINDING(IMPLICIT BINDING) or EXPLICIT BINDING (call(), apply(), bind()) or the “new” keyword.
When “this” is in the global context or in a function it is either the GLOBAL OBJECT (WINDOW object if in the browser) or UNDEFINED (in STRICT MODE).
When “this” is inside of a DECLARED OBJECT, the value of “this” is always the CLOSEST PARENT OBJECT. We can use the keyword “new” to set the value of “this”.
Thanks for reading.
References: https://developer.mozilla.org/en-US/