Learn JavaScript #22 | Class Constructor, Instance Variables, and Static Variables

Alright, so, what happens when we create a class and nothing happens, nothing happens. When you want to run a function as soon as the animal is created, or as soon as it's instantiated here, we can have a function run when this is called, basically. And in different programming languages it's done a different way. In Python it's the init method, in C++ and other C languages it's just the class name again, but in JavaScript it's just called constructor. So let's go ahead and start using this. Constructor will be run every single time that we create an animal. So, in this constructor I'm just going to console.log "Created animal" and then I'm going to save it and refresh, and you see I don't even have to call that constructor method. It calls itself as soon as the animal is created. Now I'm also going to create a fish. So, var fish equals new Animal, and right now both of these instantiations look the same and they are because they're just using a different variable name for it. So, in order to make this more unique, we're going to start passing parameters into the constructor, and this is just done like any other method call where you pass parameters in, except there's one difference. You may think that you're going to be passing the parameters into the class, but you're not. When you write out the the instantiation of a class you put these brackets here, and basically whatever's in here goes to the constructor method. So, if we're going to pass in name, height, and weight, because these are all properties that all animals have, then in the instantiation here I'm going to say the dog's name is "Fido," his height is 25 inches, and his weight is 90 pounds, so he's a very short, heavy dog. And then the fish let's say his name is "Goldie," he is...I've never had a fish so I don't know the standard height and weight. I'm going to say 2 inches, and his weight is gonna be .02 pounds...I'm not sure? Anyway, that's what we're passing in, so that's his height and weight, not sure if that's realistic or not, that's all. So, when I save this I'm going to actually change the console.log that runs in the constructor so that we can see the data that's coming in. So, for right now I'm just going to make it say create an animal named, and then the name that we pass in there. So we're going to save it and refresh it. As you can see, it uses the parameter name as we've told it to do, so you can see that the parameters are being passed from the class instantiation right into the constructor, and that's how that works. Now, let's say we want to get the length of their name. So, I'm going to create a class method, or an instance method rather, that's called how long is our...or rather nameLength. And, this is going to be a problem because we can't access the name here. Let's go ahead and try to return name.length. Save this, and down here on the dog object I'm going to call console.log(dog.nameLength()); There we go I'm going to save it and I'm going to run it, and we know that the length of the dog's name is 4, not 0. So what's actually happening here is even though we passed these values into the constructor, they're not yet usable by the entire object. They're only usable right now within the constructor. Now to declare instance variables, or variables that any method can use, we need to use the this keyword. Now this refers to the object itself, so it refers to dog and fish, the two different objects that are created here. So this.name = name; this.height = height; and this.weight = weight; So we're taking these parameters that are only usable in the constructor and we're creating properties of the object itself. So now the object has a name, the object has a height, so we can use that in other methods. So I just changed this to this.name.length. Let's go ahead and save this and run it again, and now you will see that Fido's name is 4 characters long. If I run on fish instead it's going to return 6. Now, we can also define static variables. So these are going to be unique for each object created from this class. Each object is going to have its own name, height, and width, or weight, and that's just the way that that works, or rather that's the way that this works. You can create a variable that is going to be instantiated for this class that will not depend, or it won't be unique to a given object, it will always be the same. So, in this case, what variable could I attach to that, that would be the same for all animals? I know. So I'm going to say animal, and this is outside of the class by the way, I say Animal.planet = "Earth"; So now what this does is by doing this outside of the class, it doesn't matter if this or this is created, dog.planet is going to be earth, and so is a fish.planet. So let's print out dog.planet. Save and refresh, and it is undefined. So, let me have a look here... let me just print out dog and let's inspected it. Save, refresh, alright. So, let me do some inspecting here...Animal.planet is "Earth" dog.planet is undefined...oh, sorry, yes. Alright, so, to call class level variables, instead of instance variables, to access the dog's name we would do this, and that would print out "Fido." To access variables that are not unique, or not instance variables but they're class variables, we would access that by doing the object name.constructor.whatever the variable is we want. So in this case it's planet. I'm going to save this and refresh, and we have Earth, and then we can change this to fish. Save and refresh, and it still prints out Earth, and that is because again we've created a class level variable which is not unique to two instances of the class. Whereas, anything you define with the this keyword is unique to that. So, that was a bit to sink in. I hope you guys had an easy time understanding that. This is one of the things that when I was starting with object-oriented programming, and maybe I just didn't have the right information, but this confused me a bit, constructors, and instance variables, and class variables. So, hopefully I explained that well. Let me know if I did, or I didn't, or if you want any other information or have any questions about this.