The ABCs of Javascript are: A - apply() B - bind() C - call() Using them, we can set what should refer to, irrespective of how or where the function gets called. Let's see what would happen in case of an object. method is being called through its owner object student, as shown below... 'this' showName student = { : , : { .log( .name); 
    }
}

student.showName(); const name "Rahul" showName ( ) function console this //Rahul Hence, 'this' used inside the function will refer to the student object. What if we assign the function to a global scoped variable , and then call it as below... showName greetStudent student = { : , : { .log( .name); 
    }
} greetStudent = student.showName; 

greetStudent(); const name "Rahul" showName ( ) function console this const //Does not print Anything // 'this' refers to global object now // because greetStudent is global, and hence student.showName is being called globally. The reference to changes to the , & this can cause unwanted and to spot bugs. 'this' global object hard To set 'this', we use the of JavaScript. ABC We can borrow or use the functionality of method, without having to showName Make its copy keep separately for different objects This is known as , used to efficiently utilize objects. Function Borrowing call() method student = { : , : { .log( .name); .log(friend1); .log(friend2); 
    }
}

student.showName.call({ : }, , ); const name "Rahul" showName ( ) function friend1, friend2 console this console console name "Rahul" "John" "Jane" // Rahul // John // Jane The method sets the reference to 'this' to the owner object. It can be set to any value in the object which is being passed. ( ) call() Arguments can be passed as well apply() method student = { : , : { .log( .name); .log(friend1); .log(friend2); 
    }
}

student.showName.apply({ : },[ , ]); const name "Rahul" showName ( ) function friend1, friend2 console this console console name "Rahul" "John" "Jane" // Rahul // John // Jane method is used in the same was as , except that it accepts arguments in form. apply() call() array bind() student = { : , : { .log( .name); 
    }
} greetStudent = student.showName({ : }) 

greetStudent(); const name "Rahul" showName ( ) function console this const name "Rahul from Bind" // Rahul from Bind method used in the same way as to , except that it returns a copy of the function, which can be . Even when is globally scoped, the reference to 'this' is still set to the . bind() call() invoked later greetStudent student object 🥂Thanks For Reading | Happy Learning🏄‍♂️ You can get my weekly newsletter of amazing articles I posted this week and some offers or announcement by subscribing to my newsletter here .

Too Long; Didn't Read

Making security fun one episode at a time

The ABCs of JavaScript: apply, bind, and call

Too Long; Didn't Read

Rahul

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

The ABCs of JavaScript: apply, bind, and call

Too Long; Didn't Read

Rahul

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES