Today I will be going over the significance of Subclassing, how it’s made, when to use it, and most importantly how it can save time for your next project.
What is Subclassing in Javascript?
Well, Subclassing in Javascript is very similar to how it works in other various programming languages. A subclass is a class which inherits both the properties and behaviors of another class, while also having the ability to modify the properties of that class without editing the class itself. The best analogy of this which ties to the real world would be representing a tree as a class, and a branch as a subclass; the branch being made of the tree’s genetic code, but has additional properties, like making twigs and leaves.
How easy is it to create a Javascript Subclass?
Well, there are two methods which can be used to create a Javascript subclass, Pseudoclassical instantiation, and ES6. In pseudoclassical instantiation, creating a subclass requires the use of the ‘function.prototype.call()’ method and the ‘Object.create()’ method, while also including a constructor prototype. In ES6, you would need to utilize the ‘super()’ method along with extends and including a constructor function which acts as a placeholder to store subclass data, and parameters.
How can Javascript Subclasses be used in code?
For this, let’s take a look at some examples, and dissect them individually.
Here we have an example of a subclass using pseudoclassical instantiation, with Plane being our class and Jet being our subclass. The first thing to notice is on line 3. Plane is being called with its parameters, along with ‘this’, which grabs the parameters of the class and binds it into the subclass.
If we continue to dissect the code, on lines 22 and 23 there is a new Plane prototype being created in Jet’s prototype, which links the two together. There is also a constructor prototype which defines the constructor function of the subclass.
On line 6 is where things get interesting. You can see that there is a function method being used in Jet, however there is a function within that function with the same name, but it is NOT recursion. This is because the function method checkFuel is assigned to the Jet prototype while the checkFuel inside the function method is assigned to the Plane prototype and being called from Plane, making both their own individual functions.
Here we have an example of a subclass using ES6, with Plane being our class and Jet being our subclass. On line 26 you could see extends being used between Plane and Jet, which binds Jet as a subclass to Plane.
Right below line 26 you will see a constructor function being used to hold the parameters of the Jet subclass, but there is also parameters in super, the justification being that super binds the parameters of Plane into Jet.
Also what is interesting here is that on line 32 there is an if statement with a function method being utilized, but it is not defined anywhere in the code, or is it? checkWeight is defined, but it is defined in Plane, and because Jet extends to Plane, it can then be called using a key value pair.
How can Javascript Subclasses help me in my next project?
Well, utilizing Javascript subclasses can…
o Save hours of time coding — Subclasses make time manageable with having the ability to automatically copy code from another class without the need to type out each individual class’s properties.
o Improve with error prevention — Subclassing works smoother by inheriting code from other classes or instantiated functions instantly and utilizing this gathered information to get its own code working.
o Keep code organized — With subclasses, code can be more manageable by keeping code in other JS files. And yes! Subclasses can be placed in a JS file and inherit code from classes in another JS file. It’s possible!
o Allow function methods to have flexibility — Function methods in a class can only work in that class alone. However, having a subclass allows for that same function method to be utilized in that subclass, without the need of retyping the function method by hand.
When I heard about Classes and Subclasses for the first time, I had no idea how much easier it was for me to create new objects in code. With subclasses you are no longer limited to one JS file, or limited to one function method, because with subclasses you can escape the boundaries of one file, and you can create a web of code, instead of a line. Thanks for reading.
