We all have used this
inside a function just to find out that it's not working as thought. Do you want to understand what happens? Let me explain it to you:
W3School defines this
as "... The keyword that refers to the object it belongs to". Certainly, the definition is kind of confusing. Let's start by remembering that in JavaScript anything that is not a primitive type is an object. So, this
is a keyword that you can use to refer to a particular object.
The tricky part is to know what object this
belongs to. It's simpler to think of this
as the reference to the object that is executing that block of code.
Standard Behavior of this
By default, this
will refer to the global object. In frontend JavaScript, this object is the window
. this
will only change its reference in these two cases:
-
Inside a Method: it will reference to the owner object
const person = { experience: 3, introduction: function() { return `I have ${this.experience} years of experience` } } person.introduction() //I have 3 years of experience
Note that in this example the function is executed as a method of the
person
object. If you execute it as a normal function,this
will refer to the global object.
const fn = person.introduction fn() //I have undefined years of experience
-
Inside an Event Handler: it will reference the element that triggered it.
foo.addEventListener('click', function (e) { this.style.color = "red" return });
This
inside Arrow Functions
In all of the above examples, I only used regular functions, and there is a reason why: Arrow Functions are a compact alternative to a regular function, but they don't bind their own scope. This means that arrow functions inherit the reference of this
, which in most cases it would be the global object.
So, in order to get the persona.introduction()
working with Arrows Functions, we have to enclosure it inside a regular function:
const person = {
experience: 3,
introduction: function() {
const introduction = () => `I have ${this.experience} years of experience`
return introduction()
}
}
person.introduction() //I have 3 years of experience
The Arrow Function is inheriting the reference of this
from its father function, which is a regular function as a method of person
.
Explicit Binding
You can explicitly indicate to a function the reference this
should use. To achieve this, you can use the function's method .bind()
In the next example, I will execute the introduction()
method of person
indicating the reference that this
will use.
const person = {
experience: 3,
introduction: function() {
return `I have ${this.experience} years of experience`
}
}
const anotherPerson = {
experience:7
}
const fn = person.introduction.bind(anotherPerson)
fn() //I have 7 years of experience
bind()
will return a function bound with the object that you indicated. If you don't want a return, you can bind and execute with the methods call()
and apply()
. Like this:
person.introduction.call(anotherPerson) //I have 7 years of experience
The difference between call()
and apply()
is how you can pass in arguments. You may find more information on this topic on the JavaScript documentation of MDN.
Wrap-Up
-
this
references to the object that is executing the block of code. - Arrow Functions inherit the reference of
this
. - You can define what reference of
this
a function should use with the methods:bind()
,call()
, orapply().
Hope this post helped you understand something more about JavaScript.
Ask me any questions you have down on the comments section! 😉
Top comments (5)
The object isn't executing anything. There is no belonging.
This is an parameter that is used to access a context object that was passed to the function (either implicitly or explicitly).
Consider the following.
In this example it should be fairly clear what is going on, and why there is no magic here.
x is just passed to foo as its 'this' context.
foo is not a method of x.
x is not executing foo.
It's just another argument.
Thanks for exposing your thoughts on the article!
When I tell that "It's simpler to think of
this
as the reference to the object that is executing that block of code", I'm trying to give an intuitive definition of the behavior ofthis
when is implicitly passed.In your example above, you are explicitly passing
x
as the reference forthis
. So, the definition I gave doesn't apply to this case.If you didn't indicate what object
this
should refer, it will reference the window object:Using the definition I gave, you could think of this behavior as: the
window
object is executing the functionfoo()
, sothis
will refer towindow
.You are right,
this
is a parameter that you can use to access the context object. I thought it will be easier for beginners to use a non-technical definition whenthis
is implicitly passed.What I like about starting with the foo.call(x) example is that it immediately drains all of the magic.
There are no methods in javascript, functions do not belong to classes.
There are just functions which are invoked with some object as their 'this' context.
Having understood this, you can then move on to a.b(c) and show that it's equivalent to a.b.call(a, c).
I had not thought of it that way, I appreciate your reflection on the subject and I will consider it for future articles.
Thank you! :D
You are welcome. :)