Among all the abstract ideas JavaScript has to offer, the 'this' keyword can be one of the most challenging concepts to grasp. On the surface, 'thi...
For further actions, you may consider blocking this person and/or reporting abuse
Nice! A quick, well-done test of
this
knowledge.My goto whenever anyone asks about
this
is always You Don't Know JS (github.com/getify/You-Dont-Know-JS...).As someone who learned about the
self
keyword (Smalltalk) and learning aboutthis
in JS, the article helps a lot! Especially that arrow function! So does this mean that it is better to create a Class for call instead of just a block variable? That way you can instantiate the Class call.Glad it helps, Chi! And thanks for mentioning Smalltalk -- I had to look it up haha. I don't think there's a preferred way, it all depends on your use case. Also, JavaScript's
class
keyword is not really a true class as in other object-oriented languages like Smalltalk. I found this deep-dive article, hope it helps as well: scotch.io/tutorials/better-javascr...Thanks for the fun quiz.
I was able to answer every question correctly thankfully to this post here on dev.
JavaScript - The "this" key word in depth
Sagiv ben giat ・ Aug 21 '19 ・ 9 min read
It helps to figure out
this
value for every possible case in 5 simple steps.Loved the flow chart in that post. Thanks, Eugene!
Hi Annie, a couple of small corrections...
In the explanation for examples 2 and 3:
Should be something like this instead...
In the explanation for example 2:
I tested in Chrome and Firefox and I get
undefined
in both browsers. This makes sense, because in these examplesthis.caller
is equivalent towindow.caller
, which isundefined
(unless some code on the current page has set this property).Thank you, James! Yes. That makes much more sense. I was googling around trying to find the simplest explainer, only to complicate my own thought process. Really appreciate your input :)
It's good to practice 'this' like this but there's always a whole bunch of other scenarios that might still trip people up. The best thing to do is to have some theory to solidify the understanding:
1) 'this' is an object created for every Execution Context that is created (on program startup and on every function invocation).
I think it's also important to mention that arrow functions don't get own
this
keyword - they can usethis
keyword of their closest regular function parentCouldn't agree more. Thanks so much for providing an overarching concept around 'this'. That could've been a better opening for 'this' post (pun intended).
I actually got 100% on this but I am constantly getting 'this' wrong.
Having it in this format really made me think about where the invocations and definitions were happening.
Really helpful exercise for a relative novice like me - thanks Annie!
Just gotta keep practicing. Thanks for following along, Sam! Made my day.
Nice !! You should add other tricky ones with something like :
and :
Thanks, Django! I actually thought about that, but then I'd have to introduce call, apply and bind, which might turn this little quiz into a full-fledged code challenge lol.
Very nice! I've been reading other's attempts at this and have just been getting more confused but this lays out some straight forward rules.
FWIW, This sentence is confusing to me, "Here, we assign a new variable to the says function inside the call object." Unless I'm misinterpreting, I would describe it more as, "Here we assign the says function inside the call object to a new variable."
Thank you for writing this up!
Glad you find this quiz helpful! And thanks for the feedback – I have rephrased it accordingly:
"Here, we declare a new variable,
newCall
, and assign the says function inside the call object tonewCall
."Hope this clarifies.
Just to be nitpicking the correct solution for challenge #4 is not "Undefined called, too!" but "undefined called, too!" (lowercase).
Besides, thanks for the refresh.
The hardest part for me was to remember that an object doesn't have to be new'd to create it's context.
Haha, good call. Thanks, Peter! That's a good reminder for me too, especially when working on more complex projects.
Hey, there are nice tasks=)
If you have a plan to prepare next episode of this keyword challenges then have a look at my post about this in setTimeout callback:
dev.to/smlka/easyspec-how-does-set...
Nice quiz! Just had challenge # 2 wrong...helped me realize I didn't have a full understanding of arrow functions
Thanks Maria! Yeah, that one messed me up too. That’s why I put them side by side. Glad it helps :)
This was pretty great! Thanks :)
Nice quiz. Nailed it ♥
Thanks for sharing, Annie. That was fun.
Wonderfull test. It made me doubt myself, although I got every one right!! 😝
I learned this mostly from FunFunFunction, I don't know what videos exactly but he made me understand it quite well.
Very nice way of teaching. (Although I answered all correctly 😜😜)
Thank You.
It is good to see the efforts you have put.
Thanks... great article!
Very well illustrated 👏
Very well put , I always confuse the two! Using arrow and using none when dealing with 'this'
Thanks for the insight and quiz 😊😊😊
This was a really great exercise Annie. Thank you for this.
Note: It's actually context, not scope.
Ah, I see. So context is object-based, and scope is function-based (reference here: ryanmorr.com/understanding-scope-a...). Just corrected it. Thanks so much for clarifying!
4 of 4, all right.