Mastering JavaScript ‘this’ Binding with Call, Apply and Bind for Precise Function Control

Understanding JavaScript this Binding and Call/Apply/Bind

---

1️⃣ What Is this in JavaScript?

this refers to the object that is currently executing the function.
But the tricky part is:
➡️ this depends on how a function is called, not where it is defined.

const user = {
  name: "Ram",
  show() {
    console.log(this.name);
  }
};

user.show(); // "Ram"

Here, this refers to the user object.

---

2️⃣ Different Types of this Binding

✔ 1. Global Binding

If used in the global scope:

console.log(this); // window (browser), global (Node)

✔ 2. Implicit Binding

When a function is called through an object:

user.show();  
// 'this' → user

✔ 3. Explicit Binding

Use call(), apply(), or bind() to manually set this.

✔ 4. New Binding

Using the new keyword creates a new object:

function Person(name) {
  this.name = name;
}

const p = new Person("Kumar");
console.log(p.name);

✔ 5. Lexical Binding (Arrow Functions)

Arrow functions do not have their own this.
They inherit this from the surrounding scope.

const obj = {
  name: "Ram",
  show: () => console.log(this.name) // undefined
};

Use arrow functions for callbacks, not object methods.

---

3️⃣ Using call() for Immediate Invocation

call() invokes a function and explicitly sets its this value.

function greet() {
  console.log(`Hello, ${this.name}`);
}

const user = { name: "Arun" };

greet.call(user);  
// Hello, Arun

You can also pass arguments:

function add(a, b) {
  return a + b;
}

console.log(add.call(null, 5, 7)); // 12

---

4️⃣ Using apply() for Arrays as Arguments

apply() is similar to call(), but it takes an array of arguments.

function sum(a, b, c) {
  return a + b + c;
}

console.log(sum.apply(null, [1, 2, 3])); // 6

Useful for:

Math.max.apply(null, [10, 20, 5]); // 20

---

5️⃣ Using bind() to Permanently Bind this

bind() returns a new function with a fixed this.

const user = { name: "Ram" };

function greet() {
  console.log(`Hi, ${this.name}`);
}

const greeting = greet.bind(user);

greeting(); // Hi, Ram

Real-World Example: Using bind in event listeners

function Counter() {
  this.count = 0;
  this.increment = function () {
    this.count++;
    console.log(this.count);
  }.bind(this);
}

const c = new Counter();
document.getElementById("btn").addEventListener("click", c.increment);

Without bind, this would refer to the button element, not the Counter instance.

This Content Sponsored by SBO Digital Marketing.

Mobile-Based Part-Time Job Opportunity by SBO!

Earn money online by doing simple content publishing and sharing tasks. Here's how:

• Job Type: Mobile-based part-time work
• Work Involves:
• • Content publishing
  • Content sharing on social media
• Time Required: As little as 1 hour a day
• Earnings: ₹300 or more daily
• Requirements:
• • Active Facebook and Instagram account
  • Basic knowledge of using mobile and social media

For more details:

WhatsApp your Name and Qualification to 9994104160

a.Online Part Time Jobs from Home

b.Work from Home Jobs Without Investment

c.Freelance Jobs Online for Students

d.Mobile Based Online Jobs

e.Daily Payment Online Jobs

Keyword & Tag: #OnlinePartTimeJob #WorkFromHome #EarnMoneyOnline #PartTimeJob #jobs #jobalerts #withoutinvestmentjob