When you're about to code a project, it's a good idea to get a clear idea of what your specifications will be. What will your application need to be able to do? What kind of information will you manage? What input will you expect from users, and how will they interact with the application? On a more basic level (for example, here we won't be doing any user interaction yet... just defining a library and writing some test scripts to demonstrate the functionality of our object classes), you have to imagine what concepts you're dealing with, and what the properties and capabilities of those concepts should be. Let's lay out a few expectations for our library:
That's a good set of initial specifications to work with. We can expand the concept and functionality our library metaphor as we proceed. So it looks like we need to have two types of objects so far: Library and Book. Moreover, it's interesting to note that any Library that we create will have an array that contains zero or more objects of type Book. With that in mind, let's start defining our classes.
Keep in mind that these parameters can be optional, as long as you handle scenarios in which they're not passed in within your function block. It's also possible to leave the parameters blank and then just set properties on the object after it has been created, however it is frequently the case that you want to be able to create a new instance of an object and set a few initial values in one fell swoop. It's the difference between...
... and ...
Once we've declared the function and established any possible parameters, we want to start fleshing out the function body, which will serve two main purposes: (1) establishing properties that the object of that type will have, including setting any that are dependent on what is passed in through parameters), and (2) defining and methods: the functions that the object can perform.
In our example, our book won't really perform a function to speak of, so we don't have any additional function definitions within the body of the Book() class. Therefore, inside of the function, all we really have to do is establish the properties of the object. This is done using the 'this' keyword. You may remember that 'this' refers to the element that calls the function when you add an event listener to an HTML element. So clicking a button with onclick="alert(this);" inside of its tag will pop up something like [object HTMLButtonElement] when you click it. Along these lines, the 'this' inside of a class definition will always refer to the current object instance that you're dealing with. So to set properties that are specific to that particular instance of the object, simply grab each variable from the parameter and then assign it to a similarly-named variable attached to the 'this' reference:
You may also have noticed that, before setting these values, I performed the following check:
This line checks to see if 'status' was passed in, and if not, sets it to "Checked In" as the default. This is a good way to set default values in case you don't always expect all parameters to be passed. What this means is that I can create an instance of a book as I did with "White Fang" in the example above without necessarily providing all three parameters. (However I did not do this with title or author, which means failing to pass in the first two parameters would cause an error.)
Objects have properties. For example, a car has a certain number of doors, horsepower, paint color, etc. These values may vary, but they're properties that all (or most) cars have on some basic level. Similarly, objects typically do similar things. For example, cars lock and unlock, start up, drive, etc. So it's useful for object classes to also be able to describe what objects of that type can do. This is possible by defining object methods. We've created a Book class, and now I'd like to create our Library class, and include in it some methods for acquiring books and checking them in and out. Let's look at how we can add a method to our class to acquire books to begin with:
... And that's it! We've defined our first method. It's a fairly simple one, and as we'll see in the next section, might even be considered useless if the objects aren't fleshed out to be more complicated, but hopefully it serves the purpose of demonstrating how to create an object with properties and then define functions that it can carry out. Let's move on to working with objects that we create.
Having established our Library() and Book() classes, let's create a library, add some books to it, and run some code to show what we've got:
Quick! Note how I looped through the books: Instead of the usual for(i=0;...;i++) loop, I simply said "for(var i in books)". This will do essentially the same thing. It's easier to type quickly, and is useful when you don't need to know which numbered index you're currently at. It will simply loop through all the indexes it finds. This is ESPECIALLY useful later if you are dealing with an array that uses text indexes instead of incremented numbers.
Recommended next: Scope: IIFEs and Closure