The this keyword can be kind of confusing to see in JavaScript and you’ll probably react as the meme above. Like what the heck is this and why do I need to use it? Well, it’s important in the usage of objects in Javascript. Also, whenever I use ‘this’, I will bold it so you do not get confused with my literal meaning of this. Anyways, this is used to refer to the object it is in. To start it off, you’ll see it used in Object Constructors:
function Dog(name, breed, age) {
this.name = name;
this.breed = breed;
this.age = age;
}const myDog = new Dog("Marley", "Golden Retriever", 9)
This is a constructor function where you can make new objects. In this context, this has no value. It’s just used as a substitute for subsequent new objects that are created. Thereafter, this becomes the value of the new object that gets created.
Generally, other than constructor functions, this refers to the object itself. There are three ways this gets its value:
- Default Binding
This in this case is when neither other form of binding applies:
function logThis() {
console.log("default this", this);
}; logThis(); // -> [object Window]
As you can see, this is used in a function. In cases like this, this just refers to the Global object, which is just a long list of keys and values that the window has. In other words, the function is the default binding for this.
2. Implicit Binding
This is the most common way you will see this used.
function myFunc() {
console.log( this.prop );
} let obj1 = {
prop: 2,
myFunc: myFunc
};
obj1.myFunc(); // -> 2
This gets its value when the object owns the function call. I defined myFunc which prints an object’s key and passed it into an object. The object now owns that function, which in turn, when it gets executed, it will use this and try to see what object it refers to. As a result, it will print 2. You can also think of it as left of the dot to see what this may refer to.
function myFunc() {
console.log( this.prop );
}
var obj1 = {
prop: 1,
myFunc: myFunc
}; var obj2 = {
prop: 2,
myFunc: myFunc,
obj1: obj1
}; obj2.obj1.myFunc(); // -> 1
In this example, I just added another object which is the same as the other object that takes another object. But now, obj1 is nested inside obj2. So how do we know what this.prop refers to? Well simple. Do you remember the “left of the dot” principle? In the last statement, “obj2.obj1.myFunc()”, directly to the left of the function which contains “console.log(this.prop)”, is obj1! So myFunc() will use obj1.prop and not obj2.prop. Ultimately, obj1 owns myFunc().
3. Explicit Binding
This is when you tell the function exactly what you want to use for this. There are three built in functions to control binding: call, apply, and bind. But I will go over just the first two, call and apply.
This is the syntax for both call and apply:
function.call(object, arg1, arg2, ...)function.apply(object, [arg1, arg2, ...])
Call
function greet(greeting, punctuation) {
let firstLine = greeting + ', ' + this.name + punctuation;
let secondLine = 'You are a great ' + this.occupation + punctuation;
return firstLine + ' ' + secondLine;
};
let danny = {
name: 'Danny',
occupation: 'Artist'
};
let mikey = {
name: 'Mikey',
occupation: 'CTO'
};
console.log(greet.call(danny, 'Hello', '!'));
// -> "Hello, Danny! You are a great Artist!"console.log(greet.call(mikey, 'Hey', '...'));
// -> "Hey, Mikey... You are a great CTO..."
So here I’m using this.name and this.occupation in the function definition greet. In the implicit binding example, I put the greet function as a key in the object, whereas here I don’t. In cases like that, the this in the function has no reference to any object. Hence, you can explicitly bind it by using the call function. It takes in the object as its first argument, and then any remaining arguments the function has like greeting and punctuation.
Apply
function greet(greeting, punctuation) {
let firstLine = greeting + ', ' + this.name + punctuation;
let secondLine = 'You are a great ' + this.occupation + punctuation;
return firstLine + ' ' + secondLine;
};
let danny = {
name: 'Danny',
occupation: 'Artist'
};
let mikey = {
name: 'Mikey',
occupation: 'CTO'
};
console.log(greet.apply(danny, ['Hello', '!']));
// -> "Hello, Danny! You are a great Artist"console.log(greet.apply(mikey, ['Hey', '...']));
// -> "Hey, Mikey... You are a great CTO..."
Apply is literally the same thing as call, but the only difference is that call takes arguments separately and apply takes arguments as an array. But functionally, they both produce the same result.
Conclusion
In essence, this is a very confusing concept to understand first. There’s a lot more functionality of this that I haven’t covered, but once you have a solid understanding of all the material I covered here, you will also have knowledge of good fundamentals of how this generally works.
