Creating a new instance is pretty easy; we can simply call a new instance to run a function, as shown in the following screenshot, using the new keyword in our console.log function on line number 11:
If we run this code inside a blank page or a simple HTML page, we will see that our log doesn't output the way we expect. But we can see an object return AuthorName {} in the Console panel of the Development tools in Chrome. What this shows us is that we are actually logging a new instance of an object, but not the author's name.
Constructors, Prototypes, and Arrays
[ 102 ]
In order to properly display this name, we will need a keyword to declare a reference to the instance of this constructor. To do that, we will use the this keyword; in JavaScript, this is a reference to the exact point in execution in a scope.
The this keyword in JavaScript refers to the scope and variable that exists at that point of script execution when it is used. For example, when you use a this keyword in a function, it can reference a variable that is also in the same scope (or inside a function). By using a this keyword, we can point to variables and objects at a certain point in a code's execution.
A scope is simply a block of JavaScript code with its own variables and properties. Scopes can include a global-level scope of a single JavaScript object, meaning an entire
JavaScript file, a function-level scope where variables and properties are set inside a
function, or, as discussed earlier, a constructor since a constructor is a function. Let's rewrite our AuthorName constructor with this keyword so that we can
reference our scope and print our value to the Console panel. We will need to create
an initializer inside our constructor in order to get our scoped variables returned. An initializer (sometimes called an init function) specifies certain variables inside our constructor and assigns properties on creation.
Here, we create a variable with a this keyword prefixed to indicate that we are referencing our instance inside our constructor followed by our function called init, which equals a function, just as we would use a variable to declare a function. Let's take a look at this in the code shown in the next screenshot:
Chapter 6
Take a look at line numbers 13 and 15; on 13 we declare a variable author1, with a new AuthorName constructor having Chad Adams as the string parameter. In this example author1 is an instance of the AuthorName constructor with Chad Adams as the only parameter.
Also notice that, on line number 15 in our console.log, we have an init() function that is an inner function of our constructor. We can create other functions in our constructor as well, for instance printing a custom log message like this as shown in the next screenshot:
As we can see on line number 11, we have now added a helloInfo() function, scoped to our AuthorName constructor, that prints out a custom message using the author parameter. Then, on line number 20, we call this outside a console.log by simply calling the function of the constructor, which has its own console.info function wrapped inside.
Constructors, Prototypes, and Arrays
[ 104 ]
This is helpful in keeping our logic confined to a single object inside our code base and keeps our code nicely organized. This is called object orientation; it's great
for reusing code but might cause issues with performance in JavaScript. Let's try an example. Here, we have two examples of the same code, each wrapped in a console.time and console.timeEnd function. The following screenshot shows our reviewed code and the resulting time to render the code:
So our total time here is roughly 2.5 milliseconds. This isn't too bad, but now let's see what happens if we use simple non-constructor functions and what the speed of rendering the same output would be. As shown in the following screenshot, I've pulled apart our constructor and created two separate functions.
Chapter 6
I've also called the main authorName function within the secondary function in the exact same manner as on our console.log function to print an author's name. Let's run the code shown updated in the next screenshot, and see if this runs faster or slower than our constructor methods. However, do keep in mind that, depending on our system's speed and browser, the results may vary.
So, with static functions our results hover right around 4 milliseconds, which is longer than our instance-built object. So, that's a great use of static functions over prototype functions in JavaScript!
Constructors, Prototypes, and Arrays
[ 106 ]