Constructors ( Object Oriented Programming in JavaScript Series - Part 1)
Вставка
- Опубліковано 2 жов 2024
- Creating objects with constructor functions.
Article: techsith.com/ja...
Code Samples:
Constructor example:
jsfiddle.net/j...
Setting up private properties:
jsfiddle.net/j...
*My Udemy Courses
www.udemy.com/...
www.udemy.com/...
Follow me for technology updates
* / techsith
* / techsith
* / techsith1
* / 13677140
* / patelhemil
Help me translate this video.
* www.youtube.co...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
Best JS instructor out here!!!
Your examples are simple, and easy to grasp.
Thank you!
Thanks Techsith! It is awesome that closure can also work on the parameters of the function. Did not notice that before. Learned a lot from you! Thank you!
I think you missed an important point with using the new operator, the new operator creates an empty object sets the context to 'this' and also implicitly returns the object.
new.target property is the latest thing i came across. In-depth explanation and your patience is mind-blowing
Yes there are lots of new features added to JS that are pretty cool and useful. Thanks for watching.
@@Techsithtube thank you bro
Good video Techsith. Thank you. The setColor and getColor methods make sense. But it seems odd to be passing in _color to the constructor if _color is a private property. Wouldn't you want to pass in color to the constructor and then do 'this.setColor(color);' after the setColor declaration to initialize _color = color?
Fred , what you said completely makes sense. _color should always be a local property that can not be accessed directly and the property that you pass should be named color. It's a bit old video and I just realized after re-watching it. Thanks for pointing it out.
Grest explaination!!!
Keep doing....
Please add tutorials for webpack and angular Inerview Q&A.
You are very articulated about the concepts you're explaining thanks a lot man
Good stuff here TechSith, dont forget to add a link to Closures beneath the video ;)
so awsome..was almost quiting on javascript till i met your videos..thanks alot
I am glad that you decided to not quit Murithi! Keep learning !
ooh sure, from kenya by the way. i like your tutorials.
how do i destroy an object after instantiating from a class or a base constructor,?
for example am building a media player using jquery and javascript.
eg var audio = new Audio();
at a certain stage i want to delete this audio object, how do i do it?
You can set it to null.
ooh i see..thanks
Sir,I have a doubt in oop in JavaScript.when can implement anything in JavaScript without oop also.Then what is the use of oop in JavaScript?When do We use oop in JavaScript?
Sir,I have a doubt in oop in JavaScript.when can implement anything in JavaScript without oop also.Then what is the use of oop in JavaScript?When do We use oop in JavaScript?
This is one of the most useful tutorials ever!! Thank you so much for this techsith tutorials 🙌
Hi, why i saw on other tutorials getters and setters used like: get color() {return this._color} , or set color(color) {this._color = color} , i find your usage a bit confusing: is there any difference? thanks.
I would like it if you tough the virtual dom, shadow dom and vanilla javascript.
Underscore generates not a private property it shows only a private characteristic... # at the beginning of a property is a private property. This is the case in newer versions of JS
Hi sir, what will happen if I call method of a class inside of a constructor? Thank you !
Tried to watch few of your videos. You seem to sway away from the actual topic. For example if a person is coming to this video to learn about constructor then to understand your explanation he or she has to also look out for new.target or closures.
Great start to the series. Looking forward to the rest.
Do you know if it's possible to create a constructor function that takes an optional / unlimited set of parameters?
I want to enroll in you javaScript Tutorial you are great teacher..
Can anyone please explain this? This code also works perfectly fine without setColor(). *Where is actually the color being set?*
let Car = function(_color) {
this.getColor = function() {
return _color;
}
}
var redCar = new Car('Blue');
console.log(redCar.getColor()); //Blue
its using closure to hold _color. now, this works because the method is inside the function. if that was a prototype method it would not work.
Thank you so much. Very helpful !
You explained very well and i followed your all videos, what about if you creat a small project/ application which includes everything . It actually help to build a project/ architecture concepts from scratch
Towards the end of the series I will build a small practical project to explain it all. . Thanks for watching!
also one topic about Dependency Injection if it's possible for you to explain.
sure I will try to make one
Hey @techsit, why didnt you defined _color as a function variable, instead used it without defining as a function argument? (while teaching private variables...10:00)
_color That is used as a closure.
you are really A great javascript teacher! :)
just a quick question.
what is the difference return value and assign the value ?
//return the value
this.getColor = function(){
return _color ; // return the value
}
//assign the value
this.color = _color; // assign the value to property
--- i've learned this code to assign the value
I don't know any difference.
please help me in understanding.
thanks in advance.
Great Tutorial. i understand constructor but angular 2 use constructor this type " constructor(public fb:firebase){
but not use here this.fb = firebase
}"
why i don't understand this. pls help me
Ur name shouldn't be techSith. It should've been techYoda..
is the 'global object: window' different from the 'master Object' ?
Tech Smith please make a video on cookies of programming😂😎
thanks, very good tutorial.
Thanks for watching! :)
Easy to understand. Thank you :)
Thanks for watching! :)
Very helpful tutorial..
Please be decent and stop promoting the old JS syntax. Please use a decent syntax version according to our year. DO NOT MISLEAD NEWBIES!
First of all I am decent , second of all I am not promoting any thing, I simply teach . And I still don't understand what old JS syntax I am referring to? I use 'let' not 'var' also every function is a constructor. if you learn react you will know the binding issue with 'this' that is because most of the people dont know about function as a constructor.
Couple of days back my friend recommended me to watch JavaScript videos on this channel.Thanks for the tutorials with details explanation.I am already fan of these tutorial.Very eager to watch complete JavaScript series today itself.
Thank you very much for your videos. Your really start from the very basics so it is comprehensive also for the complete newbies. Just one tiny advice. The newbies won't probably know how to get the same result as you have in the console :) That jsfiddle.net what you recomended once is a great shortcut.
Vaclav, Thanks for the advice, I will keep it mind for the next video . Thank you for watching!
Excellent video I'm looking forward to video #2. By the way I don't know if you have lived in the USA for a long time but you speak excellent English. I understood everything you said perfectly. Thanks for the upload!
Thanks for watching! :)
cant stand this unless its const that = this
no...just storing this to a constant named that. It can be named anything for clarity, but it should not be reassigned a value.
Its a good idea to use const instead of let usually. So you don't accidentally overwrite.
Thank you very much for these wonderful videos! They are very clear and helpful! Good luck
Glad you like them!
Your explanation is just awesome and simple. Thanks a lot !!!
Awesome ! 👍🙏🏻
Very well explained and Great Tutorials bro...
thank you for sharing this tutorial actually I am having one exam on object oriented JavaScript this Saturday could you please tell me some websites.. to learn and write the exam very effectively
thank you so much for providing these details but the way it was explained in Mozilla , exploring js is very difficult to understand . your videos are very simple enough to understand the same
Very good, thanks. One question: Am I right is supposing that the new keyword "automatically" calls the this.setColor function (or really any function after the this keyword) ? Otherwise, it is very strange that you can console.log the getColor without having explicitly called first the setColor.
I am assuming that you are referring to the setting private property example. In that when you call the constructor if you notice the passed parameter is '_color' which is set the variable we are setting as a closure. So by simply passing it we are setting it. It doesn't really invoke the setColor function . Did i answer your question?
I am sorry : "this.setColor = function(color){_color = color}" is a function expression. But it is not invoked or called. How then can _color be set ? ( For which I am assuming the new keyword does the job) Thank you so much if you could enlighten me on this one (all your other great videos are always compeletly clear to me)
Yes this.setColor is not invoked automatically when the constructor is called. If you look at the example i don't have a local variable. I am passing _color to constructor and that automatically becomes a closure so you dont really have to set _color using setColor. However you can call setColor if you want to change the color at some point.
Thanks a lot ! Great work you are doing.
I had this same question as well. I couldn't figure out how "_color" was being set if setColor was never called.
Your Tutorials are really great with well explanation. Please provide the advanced Java Script Tutorials. That will help us most.
Please make tutorials on JavaScript Oops concepts..
This series will go into JavaScript Oops concepts. Which other advanced tutorial you would like to see?
The force is strong in you techSith.
May the force be with you Aaron. :)
Come-on, Tree House F.u.C.K.e.D me up, I hate advertisements
I know somehow treehouse is throwing money like there is no tomorrow. :)
Hi,
A question for you. All the documentation I've been able to find for creating constructors shows something like the following (using your Car example):
function Car (color) {
this.color = color;
};
I'm just sort of confused why you use let, function and = to start it out. Is this more of a style thing?
let Car = function(color){
this.color = color;
};
Thanks for your input.
when you say function Car (color) {
this.color = color;
};
its called function declaration
let Car = function(color){
this.color = color;
}; is called function expression . where function is stored into a variable.
In JavaScript, function expression is preferred over function declaration. because function expressions are not hoisted. I have a tutorial on it where I explain the difference in detail.
OK, thanks for your reply.
Pls Suggest...What programming languages one needs to know to understand React Native.......
You need to have strong JavaScript base and you can learn React Native.
Thanks bro... i am learning from your Java script tutorials, Js Basics,Advance,OOps i mean your every tutorial on JS....Hope that will be enough to build apps on React Native...
Best JS OOP series I have seen so far
Hi bro i like your videos i have doubt in return function can u make separate vds .
What is the doubt Raman?
Great Tutorials! I'm doing interview questions and each question that comes up you have the answers for. What ide are you using that completes your div tags ?
I am using jsfiddle . But with any ide u can type div and hit tab to complete the tag
Thanks a lot for this series!! You're the man.
well explained thank you sir
Your webcam bitrate is really low
Yes it was supposed to be the best webcam. but turned out to be completely useless.
@@Techsithtube could be Just config
Can you create playlist for React + Redux + Webpack + Babel?
I am going to start React series after this series.
Thank you.. Awesome.. waiting for it
Not loud enough, needs more volume, and a volume control, and UA-cam widgets where they belong.
buy headphones
very well explained!!!
Thanks for watching! :)
Thank you
Nice tutorial :)
Thanks for watching!
part 2 ?
Parthi, here is the full playlist ua-cam.com/play/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt.html
very well explained. thanks
Thanks for watching!
thanks
Thanks.
Good job, thanks for Your work!
Thanks for watching! :)
keep inspiring
thanks for watching
I'm excited
Thanks for watching! :)
Hi Techsith. Can u suggest me best way to practice while watching your videos like you are typing sample codes and showing output. I want the same kind.
This is awesome. I have been working as a web developer for several years now and I can say from experience that this is extremely clear and to the point.
Thanks for watching! :)