"this" allows us as the developer to use an objects context when calling a function. You can choose which object you would like to call a function with, even if that object does not have the function as one of it's properties.
Example: If there is one common function you have, like sayHello you want that function to work with many objects that have similar properties.
var personOne = {
name: "Bob",
age: 35,
function sayHello() {
return "Hello " + this.name;
}
}
var personTwo= {
name: "Jane",
age: 28,
function sayHello() {
return "Hello " + this.name;
}
}
There are 4 ways to use "This" in javascript, i'm going to explain the first two types, Implicit and Explicit binding
- Implicit Binding
- Explicit Binding
- New Binding
- Window Binding
⭐ Where is this function invoked?
- Most commonly used
- Left of the dot rule
- When you are calling a method on a object, look to the left of the dot and that will be "this".
- EX: me.sayName();
- me is this
var personOne = {
name: "Bob",
age: 35,
function sayHello() {
return "Hello " + this.name;
}
}
personOne.sayHello(); // Hello Bob
- Explicit binding allows you to "Explicitly" set the "this" operator.
- Call, apply and bind are the three methods you can use
In other words, you can "explicitly" set the object and parameters you want to use to call the function with. See below
sayHello.call(obj, arg1, arg2, arg3)
I'm using a method called sayHello calling the call method on it and passing the obj object and three arguments arg1, arg2, and arg3. Note with call you need to pass additional arguments individually.
In the example that follows, since the me object doesn't have a function sayName as a property we cannot just use implicit binding me.sayName() we need to use the sayName's call method. every object has a call method on it.
function sayName(food1, food2, food3){
console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};
var me = {
name: "Jeremy",
age: 24
}
var foods = ["pizza", "ice cream", "donuts"];
sayName.call(me, foods[0], foods[1], foods[2]) // Hello my name is Jeremy and I like pizza, ice cream , and donuts
sayHello.apply(obj, args)
Where args is an array for example: var args = [1,2,3];
function sayName(food1, food2, food3){
console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};
var me = {
name: "Jeremy",
age: 24
}
var foods = ["pizza", "ice cream", "donuts"];
sayName.apply(me, foods) // Hello my name is Jeremy and I like pizza, ice cream , and donuts
Bind - is similar to Call only it will NOT invoke the function right away. It will create a new function you can invoke later.
Below I'm saving the resulting function in the variable "newFunc"
function sayName(food1, food2, food3){
console.log("Hello my name is "+ this.name+ " and I like "+ food1 + ", "+food2+" , and "+ food3);
};
var me = {
name: "Jeremy",
age: 24
}
var foods = ["pizza", "ice cream", "donuts"];
var newSayName = sayName.bind(me, foods);
newSayName(); //Hello my name is Jeremy and I like pizza, ice cream , and donuts