“This“ is the commonly used feature of JavaScript and it is at a times most confusing keyword. In this post I am going to show you how to keep track of this.
The basic concept for this is, An object whose method is called becomes the value of this in the method. In other words This refers to Object function belongs to.
In general when you use this in a global code(code not nested inside any function), we know Window is a global Object there are exceptions but that’s for another day, so this contains the reference of this global object. To add variable to global object.
this === window //Truethis.bag = "books"; console.log(window.bag);//books
In the above code bag is added as the property of the window Object.
Now let’s move this inside a function
var myvar = 0;
function bun(){
myvar++;
console.log(this.myvar); //1
console.log(this); //this = Window global Object
}
The value of this inside a function remain same. We can either use this.myvar or myvar to refer to the variable it is because the function bun is global function. Bun function refers to global Object.
Now let’s move to more complex code
var myObj = {
variable :2,
inc :function(var){
if(var>0){
this.variable +=1;
}
}
};
myObj.inc();
Inc is a method, a method is just a function that is property of an object. In above code we have Object myObj which has method inc. The value of this inside method inc is myObj. Whenever we call method of the object the value of this is set Object whose method is called.
Let’s take another case.
function Cons(){
console.log(this); // empty Object Cons {}
this.bol = false, //filling this Object with bol, var inc
this.var = 5.
this.inc = function(vary){
if(vary > 0){
console.log(this); //value of this is set to myCons Object
this.var +=1;
}
};
console.log(this); //Cons {bot, var, inc}
}
var myCons = new Cons();
myCons.inc(5); //var = 6
Here I used a Constructor function Cons. Unlike before when we looked at the value of this in global function it referred to global Object Window. The value of this in Function called as new is not a global object. Calling a function with new changes things now this is set to an empty Object i.e. the new Object we are creating by calling a constructor function. The Object from the value of this is returned from constructor function assigned to variable myCons. If we create another Object from constructor function then the value of this will refer to the Object.
function Cons(){
console.log(this);
this.bol = false,
this.var = 5,
this.inc = function(vary){
if(vary > 0){
console.log(this);
this.var +=1;
myFunction();
}
};
console.log(this); //Cons {bot, var, inc}
}
function myFunction(){
if(!this.bol){
alert("bol is false");
}
}
In the above case if you see I created a function and invoked it inside inc method but you won’t see any alert message or any error. One can think while calling a function inside a method will refer this to the Object method belongs to. BUT IT DOES NOT. Just like before the value of this is set to global Window object it will search for value bol inside a window object but it won’t find any bol hence no alert message will be displayed. To fix this problem we have to pass value of this to myFunction. Like shown below
function Cons(){
console.log(this);
this.bol = false,
this.var = 5,
this.inc = function(vary){
if(vary > 0){
console.log(this);
this.var +=1;
myFunction(this);
}
};
console.log(this); //Cons {bot, var, inc}
}
function myFunction(fun){
if(!fun.bol){
alert("bol is false");
}
}
In above case myFunction is a global function the value of this is set to global object. Below is another tricky situation.
var str = 6;
var example1 = {};
var example2 = {
hm : 0,
};
example1.fun1 =function(){
example2.printgarbage = print;
}
function print(){
console.log("dsd");
str++;
this.hm = str;
console.log(this); // Object{hm:7, printgarbage: function: print .....}
}
example1.fun1();
example2.printgarbage();
In this situation print is called as a method to example2 Object hence this is set to example2 Object. But if we Invoke the function inside method, like
//code
example2.printgarbage = function(){ print();};
//code
Here making a function printgarbage and inside it we are invoking print function. What happens here is we set anonymous function to print garbage. The value of this inside this anonymous function is set to example2 Object. However when we call print function we are calling it as a regular function hence the this value inside print function is set to global Object.
To set the value of this pass along value of this to print function as discussed before. Or we can use call and apply function these function will help to set the value of this.
//code
print.call(this);
//code
In Global code this refers to global Object. When you call method , value of this is Object whose method is called. When you call a constructor function, it creates an empty object and assign it to this in the function.
Best Open Source Business Intelligence Software Helical Insight is Here
