Context (this)

Context and Scope is two different things, JavaScript have the global scope and function scope, Your JavaScript code is always run with the some form of context. That is the object, an object within which it is operating.

In simple language, We can say that whenever the code is running it have the one context object that is “this”. “this” can have all the properties, variables and methods of the current context.

If our code is running in global scope or inside the “window.onload” event than our code have the context object that is “this” and “this” object is a instance of the window object, so we can access the any properties, function and variables of the window object using the “this” keyword.

var a = 10;

function myFunction() {
    alert(this.a);
}        

this.myFunction(); // 10

As you seen in above code I declared the variable “a”, and I also declared the one function called myFunction, After that I called that function using the “this” keyword, if function is declared in the global scope and called without any context binding so it have the object of the window class in the form of the “this” keyword. So you can able to access the properties of the window object using the this.

Let’s run below code and check the context of the function by debugging the function in the browser.

function myFunction() {
    var that = this;
}

var button = document.getElementById("btn");
button.onclick = myFunction;

myFunction();

When first time the myFunction() is called by the executing the myFunction() statement than the myFunction() is running under the context of the window object. so the “this” keyword have the object of the window class. When you debug the “this” of the myFunction() than you can found the “this” is object of the window class.

I also assign the same function to the onclick event of the button, whenever user clicks on button same myFunction() is called.
than it will run under the context of the button, so now “this” keyword have the object of the button.

So now let’s clicks the button and now checks the context of the myFunction button.

Yes now myFunction is running under context of that button, so now here “this” keyword have the object of button on which the user is clicked.

So we can also say that we can able change the context of the function in which it is running, It means we can change the value of the “this”.

Example:

function WindowStyle() {
    this.style.color = "white";
    this.style.backgroundColor = "red";
    this.style.textAlign = "center";
}

var button = document.getElementById("btn");
button.onclick = WindowStyle;

WindowStyle();

When the WindowStyle() function is called by calling the simply WindowStyle() statement than it is running under the context of the window, so “this” keyword have the object of the window. But when function is called using the statement WindowStyle() than we get the error like this:

Uncaught TypeError: Cannot set property 'color' of undefined

because the window object does not have the property style so we can not set the color, backgroundColor and textAlign of it.

But when user clicks on the button than myFunction will running under the context of the button. so “this” keyword have the object of the button, so all the styles will be applied to the button.

Before click on the button

After click on the button

So here the context of the myFunction is changed depends on it’s calling.

I hope you enjoyed this article, Please comment down your review about this

Happy Coding...

🙂