JS "this" and Function References - What is it all about?

Подписаться 918 тыс.

Просмотров 75 тыс.

50% 1

The "this" keyword is the source of a lot of confusion in JavaScript world. So are function references (function calls without parentheses). What are "this" and those function references all about and why do you use them in JavaScript?
----------
Read the article: academind.com/...
Starting Code: github.com/aca...
Finished Code: github.com/aca...
Learn JavaScript from scratch: acad.link/js
Or take the "Accelerated ES6 course": acad.link/es6
Want to learn something totally different? Check out all other courses: academind.com/...
----------
• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.( / academindchannel )
• Or visit our Website (www.academind.com) and subscribe to our newsletter!
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Опубликовано:

13 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 228

@ernestodiaz4378 5 лет назад

Uff, few people I've known, who can explain things so clearly and easily. Thanks for the video, it's awesome!

@academind 5 лет назад

Awesome to read that Ernesto, thanks a lot!

@JMEPatterson 6 лет назад

"Mind yoga" - I love it and it means you really are a Guru. Thanks for these videos. I got here backwards - I'm taking some of your Udemy courses and was so impressed that I came to RU-vid to see more.

@academind 6 лет назад

Thanks so much for both your fantastic feedback and your support here and on Udemy James! This honestly means a lot to me!

@vaheghevondyan9437 6 лет назад

Every time when I watch your videos I make sure, that your explanation style is the best for me and I am sure not only for me. Thank you and much success in your work.

@academind 6 лет назад

It honestly makes me happy to read such awesome comments Vahe! I try my best to explain as understandable as possible and it's just fantastic to see that this explanation style works for you and others :)

@yuriishportko5935 6 лет назад

Max, THANK You very much, only now I understood what for bind() is

@academind 6 лет назад

Happy to read that the video made things clearer for you Yurii, thank you very much for your comment!

@sebbelur124 3 года назад

At what point in the video does he cover the empty parthesis?

@sebbelur124 3 года назад

*parenthesis

@Deliverant 6 лет назад

the 'this' in javascript it's been the hardest thing to grasp correctly for me, thankfully we now have arrow functions. But it's also super important to know how the 'this' behave because there is a tons of legacy code out there

@Hossein13M 4 года назад

I really learned a lot of things by watching this video. the things I did before without knowing its reason. Thanks a lot, Max

@slightlym4d 5 лет назад

I simply LOVE the way you teach and the way you explain things. Huge thank you!!!

@academind 5 лет назад

Feedback like yours means so much to me, thanks a lot :)

@CarlosUeda 3 года назад

Normally I don't make comments in videos. But I totally recommend Max's courses. It's the best way of improving your development skills.

@pablokatt 6 лет назад

This is this !! Very happy you have made this video Max nobody explain programming as you!!

@academind 6 лет назад

Thanks so much Pablo, just great to get such an awesome feedback!

@dmalvi2002 2 года назад

You're the one of my great teachers. Still I need your videos to watch everyday or memorizing what I've learned from you before.

@vugar892 6 лет назад

Awesome explanation! There are many tutorials trying to explain this concept but found this tutorial very helpful and easy. Thanks!

@academind 6 лет назад

That's just fantastic to read, thanks so much Vugar!

@GNAFerreira 5 лет назад

Wow!! What an amazing lesson!! I would eventually spend some 5h googling this thing around and still don't understand it well, if I hadn't watched this video. Thank you!!

@academind 5 лет назад

Happy to read that the video was helpful for you Gustavo, thanks a lot for your comment!

@bowielam7866 2 года назад

This is the most clearest (yes i know that's not grammatically correct) video that explains both "this" and arrow function. Thank you for making this video, I finally get this solved. Thank you so so so so so much.

@bwanamaina 6 лет назад

Thank you Max for clarifying this

@academind 6 лет назад

Happy to read that the video was helpful for you, thank you very much for your comment!

@blacksmokegearjammer 2 года назад

Definitely the best explanation of 'this' I have come across. Thank you.

@tadtab2 5 лет назад

I am now able to see why => functions help to resolve the problem with 'this'. I was reading it in theory and now it is with practical example. I really appreciate for the help Max.

@academind 5 лет назад

Just great to read that the video made things clearer for you, thank you very much for your comment!

@tanmaykrdey9293 3 года назад

Great explanation. I really love Your courses. All the step by step explanation really helped me. Thank you.

@gajananpalankar3675 4 года назад

Awesome Video! Really helped a lot to clear the confusion around this. Good work Max!

@walljacket 6 лет назад

Finally! I am finally beginning to "wrap my brain" around "this". Thank you Max. You are awesome

@academind 6 лет назад

YOU are awesome David, thanks a lot for sharing this great feedback!

@snehakamble229 3 года назад

best explanation of this keyword found on internet.

@syataheri9463 2 года назад

The best explanation of this keyword. thank's a lot, max

@skullwise 2 года назад

No one could have explained this any better. you are the best!!

@richardramos7267 3 года назад

I'm sooooooooooo amaze how you explain things man, you are fricking amazing.

@sukmonugrohoamd489 4 года назад

Awesome, now i understand the basics of this thanks to you. Thank so much Academind

@mrityunjoynath7673 2 года назад

Came from the React - The Complete Guide. Awesome instructor.

@alinamarasca2 3 года назад

Finally, I got "this"! Thanks you very much!

@babinsapkota8269 2 года назад

I just want to appreciate this content which is extremely helpful for every Javascript Developer.

@wobsoriano 6 лет назад

this.video = 'awesome' ;

@academind 6 лет назад

Thank you Robert :)

@ahmedanalattack 6 лет назад

Or maybe () => { this.video = 'awasome'} to be on a safe side :(

@Rilex037 6 лет назад

TypeError: Cannot read property 'undefined' of undefined at yt-formatted-string.video

@rambo9769 3 года назад

@@ahmedanalattack Yeah. That's what i do.

@peterkirubaithilakan4752 Год назад

Hi Max, I like the way you think and explain the content. i usually have a lot questions when follow a course but very little when I following your course as it is well explained. Keep up the good work.

@yousseftijdit Год назад

Adding this to my favorite videos. Thank you very much Max! 'this' starts to make more sense.

@EdyGavrila 2 года назад

Thanks, Max, Manu. Your video was a really nice refresher on 'this' keyword. Very clearly explained, as always in your videos.

@Gadgetoholic 2 года назад

Max - I saved this video to tutorials I'm sure I will get back to in the future. Thanks !

@akunanagideon2010 3 года назад

A lot of mind yoga here. Great one, Max

@ashokyadavfqplmgxjia4668 Год назад

when my company told to me to do certification from this guy on udemy I used to hate him. but now totaly depend on him to grab any type of knowledge.I have bought 4 courses of him.

@jeremytsang9942 4 года назад

I was confused this topic before but now it totally makes sense. Great video!

@ruchithota8725 2 года назад

Very nicely explained the "THIS" keyword......:)

@LevviTalk 6 лет назад

Amazing video! Best explanation I've found so far on this subject. Everything makes sense now.

@academind 6 лет назад

Wow, what an awesome feedback, thanks so much for that!

@abhinav4279_ 2 года назад

That's what happens when you try to do multi paradigms(OOP/FUNCTIONAL) with a single language. A whole package of exceptions, yet beautiful. Nice video.

@kenw3249 5 лет назад

well done Max，this is the reason why in react component class you should bind method to allow it can be executed by the jsx

@vilenczi Год назад

I counted 138 x 'this' in this. :) Great explanation, thanks Maximilian!

@Masavi86 6 лет назад

You're my hero Max. At last i understood how the binding works! Working with React i always had this doubt of why i could use arrow functions without binding them in the constructor ☺

@academind 6 лет назад

Thanks so much Mauricio, so happy to read that :)

@huaweitrainingsafrica3742 Месяц назад

Best this keyword explanation. Thank you very much

@matteobarbieri2989 6 лет назад

great explanation Max. I fought a couple of times against “this” word but finally everything is much cleaner

@academind 6 лет назад

Awesome to read that the video helped to make things a bit clearer, "this" can indeed be confusing :)

@bananapeppernov 5 лет назад

Thank you for this and all of your other videos! Incredibly helpful!

@academind 5 лет назад

This is really great to read, thank you very much!

@KRSNaveeN Год назад

Wow..really really great explanation about this keyword

@trevorsnyder3693 2 года назад

Best explanation of this. Thank you!

@hellosunshine727 Год назад

This is gold. Thanks you, Max!

@ashwinkumar3531 2 года назад

One of the best explanations out there. Thank you

@user-gu5ts5nx8r 4 года назад

Very helpful but challenging. Thank U.

@RajaseelanGaneswaran 2 года назад

Thank you - great explanation. Long live arrow functions!!

@aneoden9888 4 месяца назад

this is GOLD! thank you so much for this great explanation, and for free! really unbelievable!

@dojas64 3 года назад

Best explanation ever. Thanks, dude!

@barjosa31blogspot83 6 лет назад

A good refresher and great explanation! Thank you, Max!

@academind 6 лет назад

Great to read that you like it, thank you for your comment!

@mj2758 2 года назад

Great explanation Max you're a savior thank you

@amrextracoding 2 месяца назад

Awesome explanation, Max! Coming from React js Course on Udemy

@cagatay7201 2 года назад

as Kudvenkat is the best instructor on BE, you are the best on FE I guess. Keep going!

@nitram_nosnibor 3 года назад

Max you are bloody awesome! Thanks for explaining this SO clearly and in-depth

@CodingJourney 6 лет назад

Thanks Max! Quality content as usual!!

@academind 6 лет назад

So great to read that, thank you for your support!

@Farmatique 2 года назад

Great explanation! I remember there was another workaround before arrow functions appeared in ES6. You could say var that = this; within the constructor and then call that.addName() within button`s eventListener callback. I know, I know in 2022 probably no one use that dirt trick anymore :)

@Albert-fe8jx 6 лет назад

Great content. function versus function() -- a gold nugget. I'll have to rewatch 16:00 forward.

@academind 6 лет назад

Awesome to read that you like the video Alfred, thank you very much for your comment!

@fuanka1724 6 лет назад

Very good and clear explanation, thanks!

@academind 6 лет назад

Thanks a lot for your awesome feedback!

@DheerajBhaskar 6 лет назад

Yes, another way would be do var self = this ;and pass self to the anonymous function. You can use self wherever you used this earlier in that scenario

@Kay_Drechsler 2 года назад

Awesome explanation like always, Max!

@Patrick128000 6 лет назад

This is freaky. I was specifically having the exact problem with arrow functions vs. normal functions and how 'this' behaves differently today. And then this video appears when I get home.

@academind 6 лет назад

Guess that was kind of a good timing then, happy to read that Patrick :)

@JoeWong81 6 лет назад

THANK YOU VERY MUCH MAX!! I was hung up on this specific concept.

@academind 6 лет назад

Happy to read that the topic is interesting for you Joe :)

@KetanLambat 3 года назад

Can we have a "this" counter on this video please. This video cleared the "this" concept. Thanks

@md.akib5124 6 лет назад

whoever is responsible for calling the function will be referred as this. great!!! This hint nailed this concept inside my head.

@academind 6 лет назад

Awesome to read that Mohiuddin, thank you very much!

@rajatbansal100 4 года назад

Excellent explanation.

@mpdev_ Год назад

Amazing explanation!

@elmeroranchero 4 года назад

for anyone wondering, addName = ( ) => { . . . } also works

@ХристоСтанков-о6к 6 лет назад

Perfect explanation Max! Like always... Just wanted to add something to the tutorial : my favorite way to deal with this-binding. If we include babel then we can declare the addName method in the NameGenerator class like this : " addName = () => {.....}". I like this approach because it looks so clean to me.

@rodrigomarsan1143 Год назад

Great explanation! Thanks!

@martinmohammed4087 2 года назад

Key sentence: The "this" keyword will not always reference directly to the class itself, where the "this" keyword is used. Rather in some cases, particular in javaScript, the 'this' keyword will reference "to the thing that calls/executes your code". A good example was the NameGenerator Class and the Constructor (inside the constructor was the 'this' keyword used. The constructor function gets called by the Class 'itself' so the 'this' keyword will reference to ....? Exactly the Class itself. Thanks ...

@buntyrajput1824 Год назад

Thanks max finally I understand this

@natisaver 3 года назад

such a good teacher

@marinapetrovska7596 5 лет назад

Max, your rock! If I don't become web developer with you, I don't know how else. I used the arrow function on line 20, with the addName function, it is another way that works just fine. class NameField { constructor(name) { const field = document.createElement('li'); field.textContent = name; const nameListHook = document.querySelector('#names'); nameListHook.appendChild(field); } } class NameGenerator { constructor() { const btn = document.querySelector('button'); this.names = ["Max", "Anna", "Berny"]; this.currentName = 0; btn.addEventListener('click', this.addName); } addName = () => { const name = new NameField(this.names[this.currentName]); this.currentName ++; if (this.currentName >= this.names.length) { this.currentName = 0; } } } const gen = new NameGenerator();

@WebStack 3 года назад

Awesome Video!!! Really appreciate your efforts. Because of you, I have got confidence in coding and have started my own channel . Thanks a lot Max!! Looking forward to learn a lot from you.. :)

@ondrejzaruba3402 6 лет назад

this.currentName = ++this.currentName % this.names.length; :)) Nicely explained Max!

@alexk440 10 месяцев назад

Great explination! But, can you pass arguments by reference?

@bw7891 4 года назад

finally I know binding 'this', Thank you.Max.

@academind 4 года назад

Happy to read that Brenda, thank you!

@user-py4jl1nm3v 2 года назад

great lesson! thanks!

@jessievalladares 5 лет назад

What an excellent explanation! Thank you!

@academind 5 лет назад

Just awesome to read that you like the video Jessie, thanks a lot for your comment!

@kingipra 6 лет назад

my brain is breaking but this helps out sooo much. Thank you kind sir 'this'

@Gigusx 5 лет назад

Thanks for the video, very informative and closed some gaps :) I did have some problems with it before I even touched ES6 and didn't really know what's going on. One question. How would we go about passing something into the function we're only referencing, since adding parentheses would execute it immediately when the class instance is created? One thing that comes to mind is to call that function inside an anonymous function like what you actually did in your last example, is there any other way of doing it with less code?