In JavaScript, ‘this’ behaves differently comparing to other programming languages. If we are performing a normal function call then ‘this’ points to the window object. But we are calling the function differently than ‘this’ will point to a near object. To understand it better below we elaborated with two code snippets with two different call approaches.
Example 1: When we call a function in a normal way in the below example
Javascript
function printThis(){ console.log(this); } printThis(); |
Output:
Example 2: When we call a function using object notation.
Javascript
var obj={ name: "Ramesh", printThis: function(){ console.log(this); }} obj.printThis(); |
Output:
So, from the above two examples, we can clearly understand the behavior of ‘this’ when we make different types of function calls.
Approach: First create an object and enter sample properties. Make sure you add a function for one key, in that function add a callback function using setTimeout. Inside this setTimeout function use ‘bind’ to bind the context of this after then return this.
Example: Using Bind
Javascript
varouterFunction=function(){innerFunction =function() {};setTimeout(innerFunction.bind(this),2000);returnthis;};varobj = { method: outerFunction ,company :'geeksforgeeks'} ;obj.method();Output:
