JS "this" and Function References - What is it all about?
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2018
- 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/learn/javascrip...
Starting Code: github.com/academind/js-this-...
Finished Code: github.com/academind/js-this-...
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/learn/our-courses
----------
• 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! - วิทยาศาสตร์และเทคโนโลยี
![[LIVE] : ONE ลุมพินี 71 วันนี้!! คู่เอก "ทรงชัยน้อย vs รักษ์"](http://i.ytimg.com/vi/_AGPnq2p6Js/mqdefault.jpg)
Uff, few people I've known, who can explain things so clearly and easily. Thanks for the video, it's awesome!
Awesome to read that Ernesto, thanks a lot!
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.
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.
"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 TH-cam to see more.
Thanks so much for both your fantastic feedback and your support here and on Udemy James! This honestly means a lot to me!
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.
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 :)
I really learned a lot of things by watching this video. the things I did before without knowing its reason.
Thanks a lot, Max
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
Thanks, Max, Manu. Your video was a really nice refresher on 'this' keyword. Very clearly explained, as always in your videos.
Max, THANK You very much, only now I understood what for bind() is
Happy to read that the video made things clearer for you Yurii, thank you very much for your comment!
At what point in the video does he cover the empty parthesis?
*parenthesis
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.
Adding this to my favorite videos. Thank you very much Max! 'this' starts to make more sense.
Definitely the best explanation of 'this' I have come across. Thank you.
I was confused this topic before but now it totally makes sense. Great video!
Awesome Video! Really helped a lot to clear the confusion around this. Good work Max!
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.
Awesome explanation! There are many tutorials trying to explain this concept but found this tutorial very helpful and easy. Thanks!
That's just fantastic to read, thanks so much Vugar!
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!!
Happy to read that the video was helpful for you Gustavo, thanks a lot for your comment!
This is this !! Very happy you have made this video Max nobody explain programming as you!!
Thanks so much Pablo, just great to get such an awesome feedback!
A lot of mind yoga here. Great one, Max
No one could have explained this any better. you are the best!!
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.
I simply LOVE the way you teach and the way you explain things. Huge thank you!!!
Feedback like yours means so much to me, thanks a lot :)
Great explanation. I really love Your courses. All the step by step explanation really helped me. Thank you.
I just want to appreciate this content which is extremely helpful for every Javascript Developer.
Came from the React - The Complete Guide. Awesome instructor.
Awesome, now i understand the basics of this thanks to you. Thank so much Academind
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
Finally! I am finally beginning to "wrap my brain" around "this". Thank you Max. You are awesome
YOU are awesome David, thanks a lot for sharing this great feedback!
Max - I saved this video to tutorials I'm sure I will get back to in the future. Thanks !
I counted 138 x 'this' in this. :)
Great explanation, thanks Maximilian!
Finally, I got "this"! Thanks you very much!
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.
Just great to read that the video made things clearer for you, thank you very much for your comment!
best explanation of this keyword found on internet.
Very nicely explained the "THIS" keyword......:)
The best explanation of this keyword. thank's a lot, max
I'm sooooooooooo amaze how you explain things man, you are fricking amazing.
A good refresher and great explanation! Thank you, Max!
Great to read that you like it, thank you for your comment!
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 ☺
Thanks so much Mauricio, so happy to read that :)
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.
Max you are bloody awesome! Thanks for explaining this SO clearly and in-depth
great explanation Max.
I fought a couple of times against “this” word but finally everything is much cleaner
Awesome to read that the video helped to make things a bit clearer, "this" can indeed be confusing :)
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 :)
Very helpful but challenging.
Thank U.
Thank you for this and all of your other videos! Incredibly helpful!
This is really great to read, thank you very much!
Thank you Max for clarifying this
Happy to read that the video was helpful for you, thank you very much for your comment!
Awesome explanation like always, Max!
Wow..really really great explanation about this keyword
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?
One of the best explanations out there. Thank you
THANK YOU VERY MUCH MAX!! I was hung up on this specific concept.
Happy to read that the topic is interesting for you Joe :)
Awesome explanation, Max!
Coming from React js Course on Udemy
as Kudvenkat is the best instructor on BE, you are the best on FE I guess. Keep going!
Best explanation of this. Thank you!
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.. :)
Amazing video!
Best explanation I've found so far on this subject.
Everything makes sense now.
Wow, what an awesome feedback, thanks so much for that!
Very good and clear explanation, thanks!
Thanks a lot for your awesome feedback!
Thank you - great explanation. Long live arrow functions!!
this.video = 'awesome' ;
Thank you Robert :)
Or maybe () => { this.video = 'awasome'} to be on a safe side :(
TypeError: Cannot read property 'undefined' of undefined at yt-formatted-string.video
@@ahmedanalattack Yeah. That's what i do.
This is gold. Thanks you, Max!
this is GOLD! thank you so much for this great explanation, and for free! really unbelievable!
Best explanation ever. Thanks, dude!
Amazing explanation!
Excellent explanation.
Can anyone explain what is happening under the hood that causes the arrow functions to 'fix' the behavior of `this`?
I understand what it does, but I don't understand why.
Great explanation! Thanks!
Great explanation Max you're a savior thank you
Great description of both 'this' and arrow (or I've heard it also called a 'rocket' => in Ruby ;) ). I certainly would have been confused to see that notation.
Is there any way to make that arrow function as a one liner?
Can anybody explain ?
When we use "this" keyword in react ? it should refer to class Name or Component?
I am so confused in this keyword
Great content. function versus function() -- a gold nugget. I'll have to rewatch 16:00 forward.
Awesome to read that you like the video Alfred, thank you very much for your comment!
very informative. my question is, do arrow functions not contain their own `this`, like normal function do ?
great video and I appreciate the various solutions
Super explanation!!
Thanks Max! Quality content as usual!!
So great to read that, thank you for your support!
great lesson! thanks!
Thanks max finally I understand this
Great tutorial, thanks !
Hi Max I am ur big fan. I have purchased ur react native course . I Suggest u please update ur course . It would be beneficial for every one.
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.
What an excellent explanation! Thank you!
Just awesome to read that you like the video Jessie, thanks a lot for your comment!
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
my brain is breaking but this helps out sooo much. Thank you kind sir 'this'
Could also use class properties or apply a decorator that auto-resolves this.
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.
Guess that was kind of a good timing then, happy to read that Patrick :)
Can we have a "this" counter on this video please.
This video cleared the "this" concept. Thanks
finally I know binding 'this', Thank you.Max.
Happy to read that Brenda, thank you!
Thanks sir !!!
I got it
Great explaination
Muy buen video, todos los conceptos están bien explicados.
I came to this video from Max's Angular course. Is this the same as for Angular(TS)?
with the code as it is @16:51 , lets say addName() took parameters how would the addEventListener call look like ?
good question... i think in that case, either you write an anonymous function that takes a param, or use that arrow syntax maybe ?
this.currentName = ++this.currentName % this.names.length; :)) Nicely explained Max!
Thank you Max !
Awesome awesome stuff Max!
Thank you :)
Top notch video, Max
Thank you David :)
9:25 How does that code move like that?
such a good teacher
Thanks Max, fantastic video! also, i have a question, if i convert the method add name to arrow function like this addName = () => and remove the anonymous function from the event listener and remain it like it was before ('click', this.addName ), i got an error: "Unexpected token =" can you spot the reason for that?
You need Babel to use class fields - they're not supported natively
Amazing, informative content like always Max :)
Thanks a lot William, happy to read that you like the video!
Academind thanks for responding! You are my JavaScript hero lol. Are you available on any chat applications? I have a question I’d love to ask you. I been watching your Angular Material + firebase course on udemy. I am making an inventory management system and I am having a really hard time structuring my data. Could you give me some tips or maybe speak with me about it? Or should I ask my question on udemy?
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();
Great explination! But, can you pass arguments by reference?
soo perfect, thank you 👍👍