C# Corner: Creating JavaScript Objects Part 3 – Constructor and Prototype

By |March 28th, 2015|Categories: Uncategorized|

Introduction

In this mini-series we are reviewing some of the various ways you can create objects in JavaScript.

Thus far we have covered the following patterns:

  • Constructor Pattern
  • The Prototype Pattern

And we will continue to cover these patterns as well:

  • The Constructor and Prototype Pattern
  • The Object.create() Pattern

The Constructor and Prototype Pattern

The benefit of this pattern is that it combines the strenths of both the Constructor and Prototype Patterns while also removing some of their weaknesses.

For example, let’s take the following C# code snippet. This code is similar to what we’ve seen in our previous posts.

https://ideone.com/IE0CK

By using both the Constructor and Prototype Patterns in JavaScript we can achieve a result that is much better than just one of the patterns by itself.

The key difference we will use in the combination technique is to store the properties on the new object instance and to define the functions off of the prototype.

//[diagram i]?

//[diagram j]?

By splitting out the data from the funcitonality it allows it allows us to have

Moving Function Declarations Inside the Contructor

Despite the benfits of combining these patterns, you still might not be comfortable with defining your functions outside your constructor. As we discussed in the first artice from this series we didn’t do that because it creates a new function for each object. However, if you really want to keep all of your code closed inside your constructor you could accomplish that by using the following technique.

Protect Your Constructor From The Window Again

As we showed in the first article in the series, you could protect your constructor from being called without the “new” operator. We will keep the same code from the previous section where we moved the prototype function declaration inside the constructor.

You could argue that putting all this extra logic inside of the construction takes away from it’s simplicity and I agree with you on that point. I would think that most developers would know to call the “new” operator and if they aren’t, then that should be a good learning oportunity for them.

Overloading Your Constructor

What techniques are available in JavaScript to simulate overloading constructors in C# classes? Let’s take a look at a C# example and rewrite it in a semi-equivalent JavaScript version.

It is important to know that there isn’t the concept of overloaded methods in JavaScript like there is in C#. JavaScript doesn’t have the idea of method signatures. You can basically send however many arguments and of whatever type to a function and it will accept them. So the trick is to check the arguments that are passed in and make sure they are what you expect.

The folllowing constructor code will check to make sure the ingredient and quanity arguments indeed have values and that the ingredient is a string and the quantity is a number. If that isn’t the case, then it checks to see if it is an object and will add that to the ingredients. Lastly, it checks to see if an array is passed to the constructor and appends the array to the ingredients. As you can imagine, I could have added many more checks to in this code, but I think this is sufficient to show you what kind of code you would need to write. I utilized some of the jQuery utility methods to make some of the type checking a little easier.

Pros of This Technique

  • A constructor that accepts parameters
  • The data for each object uses sepearte memory, so when you change one object it does not affect another object’s data
  • You reuse the same prototype function definitions across objects.
  • Since the functionality is off of the prototype you can also override that behavior as well on a per object basis.

Cons of This Technique

*

Kyle Pennell
Kyle Pennell is the editor of appendTo.com.