JavaScript Revealing Prototype Pattern

JavaScript Revealing Prototype Pattern

The Revealing Prototype Pattern makes use of two of the patterns we have covered already. It takes the concepts of both the revealing module pattern and the prototype pattern and merges the best of those patterns together. The result is a pattern that offers a lot to the developer and works well for both creating libraries or for custom code in a particular use case. The Revealing Prototype Pattern provides encapsulation and facilitates developers to modularize their code instead of having a mess of functions just randomly strewn about a project. As is the goal in JavaScript, this helps us to take variables and functions out of the global scope by making them part of an encapsulated container. The Revealing Prototype Pattern also enables us to make use of, or emulate the paradigms of public and private members in our code.

Revealing Prototype General Structure

Here we have the basic outline of the revealing prototype pattern. The pattern roughly breaks down into 3 different sections as shown. In section 1, we have a Constructor. Inside of the constructor is where all of the variables for your object get defined. These variable assignments will make use of the this keyword in a similar was as to how you might with PHP. Section 1 can be thought of as a state container of sorts.

Section 2 is where we would define the functions we want to make use of and as we can see, this is in the prototype of our object. Recall that in the prototype pattern, we actually assigned an object literal to the prototype. In the revealing prototype pattern, we no longer do it this way. We instead assign a function to the prototype, and then immediately invoke it. This is how we are able to emulate the concept of public and private members in JavaScript. Now in section 2, you can consider anything that gets defined as private.

Section 3 is the final piece of the revealing prototype pattern, and this is where we use the key/value pairs within an object literal to denote what we would like to make public. So if you defined 10 functions in section 2, and now you want to make 3 of them public, you simply reference them in section 3. The key of each key/value pair is the name external callers of the code will reference the functions by. The value in these key/value pairs is the exact name of the function defined in section 2 for which you would like to make public. To avoid confusion, many times it makes sense to simply have the key/value pairs go by the same name.

The revealing prototype pattern makes use of the new keyword in as much as if you want to make use of your defined object, you’re going to have to new it up. This differs from the revealing module pattern where everything operates as a singleton. In this pattern, you can new up as many instances as you need to make use of. The benefits however is that any functions defined in section 2 are immediately available to any new instance you create. Let’s see another example of the revealing prototype pattern.

Revealing Prototype Pattern in Action

Click Clear

Our example code here allows us the ability to create new instances of an electric bike. Our constructor holds some basic state information about any newly created instances such as the color and brand of the bike we are using. Our prototype area defines three functions. Those are engagemotor, applythrottle, and applybrakes. By default, all of these functions are private. It’s important to note that the overall structure of the prototype area is one where an anonymous function is being assigned to the prototype, and then immediately invoked. Now in section 3, we have our return statement, and we return an object literal with two members. Recall the name of the key is how you will reference the function you wish to call. The value is the actual function that will get called. We kept a simple one to one mapping to avoid confusion. As our code stands, when we new up an object, that object will only have access to the applythrottle function and the applybrakes function. Those are the two functions we have made public by way of including them in our return statement. The engagemotor function remains private. This is an encapsulated function that exists only to help the bike, or instance, perform it’s job. It is not something consumers of the object even need to be aware of. So this is a good basic example of the Revealing Prototype Pattern where we can see state being maintained in the constructor area, functions being defined in the prototype area, and public members being defined in the return statement.

JavaScript Revealing Prototype Pattern Summary

In this tutorial, we had a look at the revealing prototype pattern and learned how it provides another way to encapsulate variables and functions similar to the other patterns we’ve covered recently. This pattern provides the best of the prototype pattern and the revealing module pattern into one pattern, so it is a good one to know. In doing so, it gives us the extension capabilities of the prototype pattern along with the ability to emulate classical object oriented programming via public or private members like the revealing module pattern or the module pattern.