Ronaldo Vitto Lewerissa

Software engineering learning documentation.

JavaScript for Noobs: Prototype using Function Constructor

As of my last post about prototypal inheritance, this post will go even further about the actual usage of prototype. On that last post I’ve discuss about how we can use proto  (underscore-underscore-proto-underscore-underscore) to access/mutate a JavaScript object.

On this post on the other hand, I’d like to discuss on how we suppose to use a function constructor.

If you haven’t checked on that last post, I suggest you to do so. Here’s the link to the previous series of prototypal inheritance.

function constructor and prototype

(Picture from Udemy’s course JavaScript: The Weird Parts)

Function, as you know, can functioned as a constructor, that is a special block of code that is invoked when you’re trying to create a new object using the new  operator.

There are no supplementary between a constructor and a normal function, they are just the same.

Although a constructor has the ability to access the newly created object, the constructor will be invoked using a pseudo parameter consisting a hidden reference of that newly created object. Afterwards, the reference is kept inside the this  keyword.

If you’re not familiar with function acting as a constructor, let me explain it a bit. The common method of using a function constructor is:

var obj = new randomFunction(param1, param2);  

new  is an operator, and in JavaScript operators are function. The new  keyword takes a certain parameters new … ([ … , … ]) .

When the JavaScript engine reads the keyword, it will create an entirely new object, and invoked the function constructor you provide along with the reference of that new object.

As long as the function constructor doesn’t have it’s own return expression, the JavaScript engine will automatically return the new object reference upon the entire new  expression.

Now.

When a function act as a constructor, and a *new  expression works upon him, then the prototype property (object) will live. *

It’s funny how the prototype for the function actually not the prototype for the function, it’s the prototype for the object that is created using that function constructor.

Prototype is useful so that any object that is created with the same function, sometime later we can add features to all of those objects at once by using this .prototype  property of the function constructor.

function randomFunction(firstName, lastName) {  
    this.firstName = firstName;
    this.lastName = lastName;
}
var randomObj = new randomFunction("Elon", "Musk");  
randomFunction.property.middleName = "John";  

The this keyword on a prototype will refers to the caller object.

randomFunction.property.randomProp = this.firstName + " " + this.lastNameasdasdasdsadasdasdasdas  
console.log(randomObj.randomProp);  

It will output “Elon Musk”.

For efficiency, put all methods inside the prototype, properties sometimes have different value thus not included in the prototype. Here’s what I’m talking about:

randomFunction.property.randomFunction = function(val) { return val; } var output = randomObj.randomFunction("Hello!"); console.log(output); // outputs Hello!

Written by Ronaldo Vitto Lewerissa

Read more posts by this author.