this keyword and .call(), .apply(), .bind() method

What is this keyword in javascript?

"this" keyword in JavaScript allows a function to be re-used in various execution contexts. That is, once a function is defined, it can be invoked for different objects using the "this" keyword. The current execution contact identifies an object when we invoke a method.

If you want to understand this keyword, you have to know some binding rules. We will discuss these step by step.

Implicit Binding

In the case of common JavaScript functions, if the function is preceded by a (.) Dot notation, then the object before the dot notation is the "this" or object inside the function. If the property of the object is not found then JavaScript takes the window as the object by default.

let blog = {    name: 'Tapas',    address: 'freecodecamp',    message: function() {        console.log(`${this.name} blogs on ${this.address}`);    }};blog.message();

Explicit Binding:

If the function is not within an object, but if the function is in a global context, then when calling the function, it is necessary to specify which object will be "this" directly. This requires some built-in methods of JavaScript. The methods are:

let getName = function() {     console.log(this.name); }let user = {   name: 'Tapas',   address: 'Freecodecamp'   };getName.call(user);

.call() method:

If the function is in the global context, then when invoked the function you have to specify which object will be "this" directly. This requires using JavaScript's built-in method .call(). .call() method takes an object as the first parameter of the method and many more parameters can be given later.

.apply() method:

In the same case, JavaScript's built-in method .apply() can be used. It works like the .call () method. However, the .apply() method takes an object as its first parameter and an array as its second parameter.

let getName = function(hobby1, hobby2) {     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2); }let user = {   name: 'Tapas',   address: 'Bangalore'   };let hobbies = ['Swimming', 'Blogging'];getName.apply(user, hobbies);

.bind() method:

The .bind() method works just like the .call() method. However, the difference is that the .bind() method returns the instance of the function without directly calling the function and we can store it in a variable and call this variable as a function.

let getName = function(hobby1, hobby2) {     console.log(this.name + ' likes ' + hobby1 + ' , ' + hobby2); }let user = {   name: 'Tapas',   address: 'Bangalore'   };let hobbies = ['Swimming', 'Blogging'];let newFn = getName.bind(user, hobbies[0], hobbies[1]); newFn();

Window Binding:

If "this" is an object within a function, unless it is defined directly or indirectly, JavaScript takes window as the object by default. This is basically window binding.

Conclusion

From this tutorial, we have learned "this" keyword in javascript and .call(), .apply(), .bind() methods.

Reference

• Freecodecamp Web Docs
• Learn with Sumit Bangladesh

Thanks for reading

Reach out to me on:

• Portfolio
• GitHub
• LinkedIn