Class Fields

Beyond methods that define the behavior for a class, classes can also hold data of their own. At its core, you can think of classes as data plus methods that operate on that data. For example, with pets like cats, we may want to be able to give the cat a name. The name is the data and examples of methods might be functions that allow us to set or change the name.

Class fields allow us to specify data that is exclusive to the class. Fields are just variable declarations:

class Cat
{
    string name;
}

Class fields differ from regular variable declarations because they can only be accessed via the class or class instances. Furthermore, we declared a ‘name’ field that is exclusive to a class instance above; this means that each unique instance of the class will have its own unique name data.

Data that is unique to a specific instance can be very useful, especially when dealing with a large number of similar objects. However, our current code that renders the cat to the page actually doesn’t keep data unique to an instance! Let’s observe; change the main.jspp code as follows to call render() a second time:

import Animals;

Cat cat = new Cat();
cat.render();
cat.render();

Compile the code and open index.html. You should see two cats rendered, but we have only one instance of the ‘Cat’ class. This is not ideal; rather, we should like to require two ‘Cat’ instances if we want to render two cats to the page. In order to do that, we have to examine our render() code:

class Cat
{
    void render() {
        var $element = $(
            """
            <div class="animal">
                <i class="icofont icofont-animal-cat"></i>
            </div>
            """
        );

        $("#content").append($element);
    }
}

Do you see what’s wrong?

Each time the render() method is called, we are calling jQuery to create a new object, and then we render that new object to the page via jQuery’s append() method. What we need to do is to make the creation of the page elements exclusive to class instances. We can do this by simply moving the variable declaration in render() to a class field. Here’s our full code:

external $;

module Animals
{
    class Cat
    {
        var $element = $(
            """
            <div class="animal">
                <i class="icofont icofont-animal-cat"></i>
            </div>
            """
        );

        void render() {
            $("#content").append($element);
        }
    }
}

We’ve done nothing in the above code other than move the variable declaration from render() to the class itself so it becomes a field. Now, the field will only be initialized when we instantiate the class. In other words, the jQuery function call you see that turns HTML into a jQuery object will not be executed until we instantiate our class using the ‘new’ keyword.

Keep your code exactly as you had it with the two render() calls for the same class instance. However, with the updated Cat.jspp, compile your code again. Open index.html. You should see only one cat rendered to the page.

Now let’s try creating two cats by updating main.jspp to use two class instances:

import Animals;

Cat cat1 = new Cat();
cat1.render();
Cat cat2 = new Cat();
cat2.render();

You should now see two cats, one for each class instance: