What is Constructor Function in JavaScript? - JS Tutorial
HTML-код
- Опубликовано: 17 июн 2024
- What are Constructor Functions in JavaScript?
JavaScript Constructor Functions from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
This is episode 4 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 4, we’re talking about Constructors and Constructor Functions, the idea behind them, the problem they solve, and how they're different from Factory Functions. Episode 4: Constructor Functions. Let’s go!
All the code from this series is available here:
github.com/ColorCode/js-10-th...
0:00:00 Intro
0:01:04 What is a Constructor Function?
0:02:57 The concept
0:05:30 The code
0:09:53 Another example
0:15:49 Summary
0:16:48 Outro
What is a Constructor Function in JavaScript? 🎉🕺🏻👨🏻💻
Love your content .
You make things super easy
dfds
dsdsf
dfsd
I am watching every chapter with the same excitement (and anxiety) as a breaking bad episode. Awesome teaching, thanks 🤯👏
Haha this is the best comment I've ever got.
too bad no mr white 😂😂😂
This needs 100x more views then it does. Looking forward to the rest of the series when you upload it. Great work!
Thanks Husam! Next videos dropping next week.
This is super clean. I'm hooked. The layout, the lighting, the pace for new coders (which I definitely am) are spot on. Thanks for creating great content wrapped in a professional package. It really makes a difference.
If anyone is thinking of subscribing or liking, just stop thinking. Subscribe. Like. Done.
Thank you David
yeah! People like Sina should stop working on projects and teach from kids to adults :D
I'm not sure what i'm more impressed by, your editing or the explanations. Ivy-league like quality education for FREE! Thank you.
Thank you 😊
Thanks, I didn't even realise there was a difference between constructors and factory functions!
I been on the self taught route and these videos have been by FAR the best out there. Thank you for what you do, WE SEE AND APPRECIATE YOU!
i wanna really thank you, i pass all day long trying to undertand 'this', and you explain like a god, and blow my mind, thanks, keep the good work, please
Awesome. Thanks for your comment.
GREATE GREAT GREAT THEACHER! Evertything in your video is really accurate, from the graphic the music and timing! it's really rare find people that teach the way you do! Go on! and Thank you!
amazing tutorial! it was so well explained, thank you! ♥
Loving these, really well put together, the videos look great, and the ideas are really clear. Keep it up 👍.
Making episode 7 as we speak :) Should be out soon.
An excellent job, mate. 👌🏼
Subscribed.
I like the way you teach and the video quality and the code snippets are way better than someone talking and going through with and just speaking quickly. Good job and thank you!!
Thanks for taking the time to write that
This was really helpful,Thank you so Much!!!!!
the funny intro earned my sub...just fell flat on my face in an interview where I was asked to explain one of these...time to brush up
Coolest teacher on RUclips,live the explanation
Ty!
I'm so hooked on this series. Top notch content and presentation.
Thank you
Brilliant this is exactly what I needed mate! Wanted to make a memory game using classes for the div elements. This was really helpful. Thank you!! Carry on the amazing job cheers!!!!
Glad it helped!
It's the best explanation I've had ever 👍👍👍that a lot
So Sina...I've gone over objects like 4 times and this is the first time I'm seeing that objects create a 'this' variable and returns it when you use the New keyword in a constructor function. Being that that is the case, it really goes well with your teachings of factory functions and kinda trivialized a very hard to understand concept for me. Thank you so much for helping....You got my sub yesterday but if I could do it again, I would :).
Thanks Michael!
I'm loving your js videos. Pls keep it coming
Thank you! Will do!
This tutorial is made so well!! I'm learning javascript from Bro Code but i got a bit stuck on classes, your explanation is amazing!!
Awesome
Thx again! Your tutorials are really awesome!!
Glad you like them!
Love your content and the way you aproach everything! keep the good work!
I appreciate that!
This is definitely great content. You're a natural.
👍👍
thanks for the directions.
You are a great teacher. Thank you so much!!
Thank you!
Excellent explanation--thank you so much!!!
You’re very welcome
I loved learning about the hidden this in the constructor function. Now this.this and this.that makes this.sense!
Haha awesome
Thanks for this video, your content is pure gold! Subscribed.
Awesome, thank you!
Love your videos! Well done and appreciate all the context! Future video on all the extensions you use on VS?
Good idea! Thanks.
Great explanation! thank you so much
You're welcome
Thanks for this content, I learned a lot!!
Glad to hear it!
thanks for the explaination sir. hope god bless u
Thank you so much, I subscribed!
Awesome!
You are doing an awesome job. keep going man.Its kinda weird you have this little subscribers cause you have such quality contents, but its guaranteed you will blow up with these contents.
Thanks 🙏
Soon big companies will pick you up, They don't know yet how rare diamond you are, Exellent
Wow. What a hidden gem of a video
Thank you 🙏
The way you explain the stuff is just amazing....
Great content delivery.... Keep going champ 🏆....
Love form INDIA.♥️
Thank you!
Beautiful.I'm crying.
:)
thanks for this video
I request all the viewers to do like and comment the videos, because the content is really awesome, I am loving the Javascript after watching his videos
hah thanks!
this guy is hilarious, thank you indeed for clearing my doubt! i like the way of your teaching for newbie like me
Thanks!
Awesome video thanks 👌👌
👍🏼
Thanks for another awesome tutorial!
(Btw I'd make that chef take the first bite...)
Good call!
As a viewer I would suggest you to put the link to the playlist of video series, or any other video of your channel that you mention in the description box.
Your content is great👍👍
Good suggestion. Thanks!
Thanks for this
You’re welcome
WOW tu expliques très bien mon gars
Thanks!
Thank you for the super thanks!
This is really awesome. React does this
Thanks sina, from iran😊
👋 You're welcome!
" Uughh, I'm bored already, who da fuq wrote this s*#t?"
"You did!"
🙌
Apparently I did
hell sina
very well explanation
Would yuo consider making another series called
10 things react developer should now but probably don't
That would be really cool. Thanks for the suggestion.
Love your content man. I think I am ready for that interview now, hehe. Anyway, I love your set up. I am planning to start a RUclips channel, I'm sort of a social Critique, do you have any tips on how to set up something like yours?
Depends what exactly you need. Message me on Instagram and we chat talk @colorcode.io
You have a nice way of explaining things but unique,you wouldn't make anyone bored of even boring top. Even tho I know most of the things you teach still I watch it coz you are too good.
DOM related examples were understandable. ☺☺
Great!
Thanks for the video man, just wondering - what text editor do you use here, once presenting your code?
Chrome DevTools :)
@@ColorCodeio Hahaha 😂 I didn't see that coming 😂😂😂 Thanks man 😂
You seem like naturally has a teacher
Thanks
Cool vid, always good to see videos about different ways to do things that that I once knew, but have probably forgotten, it seems the more I learn about all the new fancy frameworks, the more I forget about basic JS :(
A couple of things I was thinking about when watching the video..
What happens when you call the constructor function without the new keyword?
How is the constructor different from the factory function as far as memory is concerned, I think, if there was a talk function in both the factory and constructor, Each item created with the factory function would have it's own instance of the talk function, but with the constructor, each item would reference a single instance of a talk function... hmm, I could be wrong though lol. I was waiting for you to show the structure of the object created with the constructor to see if the function was placed on the prototype.
Keep the cool videos coming mate :)
Chris! Always good to hear from you man.
At the end of the day Constructor functions are just functions so if you don't use NEW then it'll just execute like any other function, but obviously it won't return the this object back so nothing happens other than what's in the function itself.
Regarding the memory footprint I think you're right. One of the things I failed to mention in the video is how using constructors you're pointing to a 'source of truth' object where you can add methods to the prototype property and add functionality to your objects that's placed on one object. Where as factory functions don't follow that concept, they're copies of each other every single time. Thanks for pointing that out.
Thanks again for always watching my stuff. We should catch up soon. Hope you're doing well down under!
Please keep continue this series
More coming soon
thanks
👊
why you are not making more content like this??..it's great
Lots more content coming soon.
Please make a series on NodeJS full course
Excellent video! But I had a question? I tend to write my constructor with a class. But I also write the constructor method under the class and even write super. I am still a newbie. Technically I am guessing it is the same?
Fantastic content mate.
Thank you
If John Oliver knew Javascript it would sound like this .... Brilliant!
Haha thanks
Voila !! you are amazing!! When are you gonna post another video? I am super excited . Thanks alot.
Very soon!
What's the difference between constructor function and normal function? We can use the normal one for this example
do you still consider SuperElement as constructor function even if youre not declaring the constructor function?
Maybe I am missing something but I don’t see the need for constructors, I am always using so-called factory functions to create my new structured objects. The return syntax is very intuitive. I also never use classes.
How this is getting binded inside the arrow function
Creepy Craig!!! lol 🤣🤣🤣
He’s trying his best
Can someone answer why when he did the click event, the elements came back not in order of the array? it returned: a, b, c, b, a, b ???
I just happen to be clicking on the elements in that order. That's not the order they were rendered in. I'm clicking on the elements in a window that you can't see.
@@ColorCodeio oh awesome. Thanks so much for the reply! You the MVP.
why isn't the following syntax used ? Thanks
For example:
class Car {
constructor(brand) {
this.carname = brand;
}
}
const myCar = new Car("Ford");
Magic🤣🤣
lol
Why it's this.el in constructor element rather than this.type = type?
Excuse me, I thought you can't use an arrow function in a direct object method on this keyword?
Great video but work on the typos!
JS object constructors are like C templates
its killing me that your face next to the code is a squircle and not a circle, seems radius of the cutout is a bit smaller
Haha you noticed! It's there to grab the attention of CSS babies.
@@ColorCodeio true:) designer turned coder.
youre so cool 😂
Not clear for me , sad. I'm learning Front-end 6 months
Hahahha who the F wrote this!? 😂😂
sina and qoli ? persian much ? lol
I'm not sure why you found it so easy to call the expression on the guy's face "creepy" ?
He's just a normal chef posing for a picture with a dish he made. What is so creepy about that?
Don't get caught up in 2023 feminism ideology where every guy, even slightly showing any expression of joy in a picture, is considered to be predatory.
Good explanations for your JS material but I just didn't appreciate how you put men down like that. Be better.
"time is Monee" 😂 great talk..
I just realized how much time i wasted in my life.
Now that you’re saving time hopefully you’ll save some moneeee
Thanks for this
You’re welcome