loading...
Cover image for Object prototype property and Hunter x Hunter

Object prototype property and Hunter x Hunter

javila35 profile image Joe Avila ・2 min read

Recently, I have been learning about inheritance and the prototype chain. If you have read my posts you already know I've been diving into the fundamentals of Javascript. You probably don't know I am a huge Hunter x Hunter fan as well. I put my learning about in practice by creating a Hunter prototype object.

Gon and Killua


Function Constructor

A function constructor can be seen as a blueprint for a particular type of object. The convention is to name a function constructor with a capital letter. For example, my function constructor is a blueprint to create Hunters.

I declare that all Hunters will take two parameters, a name and hatsu (or special power for those who aren't familiar). Each Hunter will be initialized with a powerLevel of 100. Now let's add some abilities to our Hunters.

const Hunter = function(name, hatsu) {
    this.name = name;
    this.hatsu = hatsu;
    this.powerLevel = 100;
};
Enter fullscreen mode Exit fullscreen mode
Hunter.prototype.charge = function(number) {
    if (typeof number !== 'number') {
        console.log('Please enter a number');
        return;
    }
    this.powerLevel += (100 * number);
    console.log(this.name + ' power level at ' + this.powerLevel);
};

Hunter.prototype.useHatsu = function() {
    if (this.powerLevel >= 300) {
        console.log(this.name + ' used ' + this.hatsu); 
        this.powerLevel = 0;
    } else {
        console.log(this.name + ' needs to charge.');
    };
};
Enter fullscreen mode Exit fullscreen mode

By using the prototype property to store the methods charge and useHatsu all future hunters will have the ability to charge up and use their powers. I could declare these functions in my constructor. That would mean each new Hunter created would have it's own charge and useHatsu method. That's a bit excessive, I don't need each Hunter to own the method I just need each Hunter to have access to it.

I save memory by creating the function once and allowing each Hunter to inherit these methods from the Hunter.prototype property.

const gon = new Hunter("Gon", "Ja-Jan-Ken");
const killua = new Hunter("Killua", "Lightningbolt");

console.log(gon)
console.log(killua)

killua.charge(3);
gon.charge(1);
killua.useHatsu();
gon.useHatsu();
Enter fullscreen mode Exit fullscreen mode

If you haven't entered the code into the console yet, go ahead and add it all. Take a look at the objects created. You'll notice they have their name, hatsu, and powerLevel as expected. You may notice the function we created is not stored in the object. They are stored in its ___proto___ property.

Examining an object's proto property.

We don't need to include the prototype property in our function call because of the prototype chain. Similar to the scoping chain, javascript checks the object's own methods and properties. If nothing is found it checks the object's prototype. It continues this process until it reaches the top-level of the prototype chain which is null.

I covered a lot of complicated topics in a very brief manner. If something doesn't make sense please reach out. This article by Tim Kadlec helped a lot.

Thanks for reading!

Netero has gratitude

Posted on by:

javila35 profile

Joe Avila

@javila35

Full stack software engineer working for Collinear Group.

Discussion

pic
Editor guide