Let's Take a deeper dive into the unique way JavaScript Objects work. Lets pull off the hood to discover the Prototype and chains that create all JavaScript Objects. This Session will be dedicated to learning the most important concept in JavaScript OOP.

This is our second hour of our JavaScript OOP sessions. In the first hour we dabbled in our initial interactions with Objects in Javascript. In the second hour we will sharpen our focus and take a deeper look at the unique way JavaScript objects are built. JavaScript objects are based on the prototype chain. If you have a background in OOP it would be a good idea to forget about it as it might make it harder to actually get it. The JavaScript prototype is really simple as long as you don't compare it to other programing languages and how they do it.

Goals of The JavaScript prototype course

This course is the second hour of our training on the art of oop in javascript. To watch the first hour please visit Object Oriented JavaScript. In this second our we continue working on our javascript oop world expanding on our inital Google maps example. If you are totally new to javascript we recomend you start from the start of our training matirail focused on javascript foundations to check our javascript titles please visit our javascript listing

Creating Methods

A method is a function that is owned by an object. Before we move back to building a Google map we will see how to create methods. When we create our first method we will create it in the prototype property of JavaScript objects. At this stage it will be a magical component that would enable us to add new methods to objects. We create our method and now it is available to all instances of the object type we added this prototype.

Once we create and see how to create a method we will return to our Google map sample and extend our functionality of our application by creating a custom object that would control the creation process.

Creating Properties

The best way to see how prototypes work are by seeing them and interacting with them. To do that we will revisit a variable we created in an earlier video. We will now create the variable again using prototypes. We then will look at the two as now we got two variables with the exact same name. So how can this work and how is it that its not a conflict. This is exactly the point where we go back to the meaning of this and how it works and relates to variables that are defined in the constructor verses ones that are created using the prototype.

One of the most important things we will learn here is the importance of scope. You will see that over and over we mention and talk about the scope. This is because the most important concept in OOP is scope once you get it and really understand how it works in one language you will understand it in any language.

When we refer to something using the this command we are actually refereeing directly to the object itself and thus when we create a variable that is tied directly to the this we are actually creating a local variable or %u201Cprivate%u201D variable that only is available to this object while creating variables using the prototype we are actually adding the variable to every object of that type and and prototype that inherits from this one. There are a few other goodies that we talk about in this section so don't skip it, very critical.

Adding methods to built in Objects

What we want to do next is to show how prototypes work in action by showing you how you can add prototype methods by adding new methods to built in objects such as the Array object. In this example we will add to the array object new methods that will then be available to all Arrays. This section is a continuation to the last two videos as we will see a live workable example where we switch the values between two elements of an array.

We talk in detail in an actionable example of the nature of prototypes by seeing how they can extend Arrays. Its important to note this is true to any object type even Strings. Not only is this true but any new method we add to our %u201CClass%u201D we are automatically adding this method to all the existing and future objects of this type. Its important to stop now and think about this, if you come from a language that is Class based this might sound really odd as in a class based object oriented language you can not dynamically change the class to something that was created already but instead you would extend the object or create a new class. In the case of JavaScript there are no classes but instead of classes there are prototypes (objects) that are linked to each other and borrow functionality from the chain. This way at any point you can change the values or even change the inheritance line by updating the Prototype.

Extending Built in Objects

In the last section of this training we adding dynamically methods to the built in objects. In this next section we will extend the functionalities of the built in objects by creating a new sub object. This object would then be linked to the original object. We continue from where we last left off and add into the mix the capability to extend the class using inheritance. In JavaScript its not exactly inheritance as you would see in a standard OOP language such as Java/ActionScript3 in JavaScript there is a chain and as such we can disconnect or reconnect chains. In our case we will create a totally new object and then link it to an existing Object type. In our case we will create an advanced Array called ArrayExt that extends the methods of the Array.

We will add a few new methods to our new array. And text it out. We broach the topic of encapsulation. Encapsulation in its essence is the idea of what variables are visible if we loop through an object while what variables are hidden. The default behavior of an Array is all the new methods/properties are enumerable while built in methods/properties are not. Don't worry to much about the strict definition of encapsulation all you want to know is a variable loop-able or not. If that sounds a bit unclear it means its time to jump into our video so we can expand on this topic.

Summary:

By the end of this title you will have a very strong grasp over the core concepts of working in Object oriented programing in JavaScript and will know hot to extend objects using the JavaScript Prototype.

Why learn from our JavaScript tutorials?

There are many JavaScript tutorials online and there is no hiding from the fact that there are even more free developer JavaScript tutorials online and some of them are really amazing. You need to take a step back and think why would someone put up a free JavaScript tutorial online? There are always a few things that would make people do that one is just there great people and they want to share there wisdom with others(that is true always people that share are great people). These people are talented people that take time off there main work to try and help others and share something they know so I can't really say anything bad about it besides supporting it and saying that we love the free JavaScript tutorial web sphere. You might be thinking now that paying for something you can get for free isn't really a great idea... The big difference between articles and JavaScript tutorials and our site is that we are focused on you contrary to content online that is focused on showing skills and usually is narrow focused on one topic our sites agenda is you and really nothing but you. our goal is with our teaching structure to help you grow as a developer and give you tools and capabilities to become a master developer. contrary to online resources(JavaScript tutorials and such) or even books they just can't have a close connection with you and develop with you and your needs. so that's our big pitch our content (some of it is free as we love sharing and giving back to the community as we really love the free and open web) we want as well to build a very close relationship with out student and to make that happen it costs us a lot of money and time so we got to charge for it(in an ideal work i would have my site fully free but i would then go hungry ;)). So our prices are really fit to match any one but if you have financial issues or need help we are always happy to help i never got requested for help and didn't figure out a creative solution to help the student figure how to become one even if it meant getting the student to do some work for me. our main agenda is really you the money is a byproduct so i can eat organic food and fun toys for my cats. so please never fear contacting me if you need help that's why i have this site and that's about it ;)

What do you get out of our JavaScript tutorials?

There are two types of teaching styles these days that are popular one is focusing on a key word that is buzz such as "html5" and then really giving you something that can't be a deep concept that would help you grow as a developer and another one is a very broad topic that would fit a large market so its easy to sell in masses. both these styles have a place and are good in some level but for many this style just doesn't work its expensive over time and you miss very critical building blocks that without them you keep depending on other JavaScript tutorials to get your things done. We don't' work that way ! we don't create buzz word titles we create titles we really think and know they will expand you skills and make you better developers if we don't believe it in it we don't make it - and our agenda isn't very marketable its hard to sell someone an idea that will take you 1-2 years to get to where you want to be while trying to sell you a 15 minutes video on how to do everything in 2 minutes is really easy we want things the easy way but the easy way just doesn't work so if you really want to become a very successful developer give us a shot. Our results are our students that most of them started with no background at all a in less then a year some turn into game developer and some just get enough insight into he world of development that they can manage teams (mainly our creative students that just want to know how to talk with there developers and have better grasp over what is going on). by the way this first title is totally free so you can get started before you even think about if you want to spend some green.

Download
Source