JavaScript: Functions in the Object Model
By Abhishek SwaminathanIn my previous posts, we have learned about the JavaScript Object Model using prototypes. We have created our own classes and seen how inheritance works. We have also understood the behavior of functions as objects in JavaScript.
In this post, we will see where JavaScript functions fit into the JavaScript Object Model.
Creating our function
Let us create a random function for our purposes.
const f1=function(){console.log("Hello World");}
f1();Our browser output is:
Examining our function
Now let us examine our function f1. Type in the following code:
console.log(f1);
Our browser output is:
Our function has some predefined attributes already. For our purposes, we are interested in the ‘prototype’ and <prototype> properties.
Log the prototype of function f1 to the console.
console.log(f1.prototype);
The output is:
Let us examine this.
As Javascript functions are also objects, they have a prototype. The ‘constructor’ property of the prototype points back to the main function itself.
If we examine the ‘<prototype>’ property of f1.prototype, we see that it is the same as Object.prototype, i.e., f1.prototype inherits from Object.prototype. This is exactly similar to the relationship between constructor functions have with the JavaScript Object.
The Function.prototype
Let us now examine the ‘<prototype>’ property of our function f1, i.e., the prototype object f1 inherits from.
Execute the following code:
console.log(Object.getPrototypeOf(f1));
The ‘Object.getPrototypeOf’ function takes in an object as an argument and returns the prototype that the object inherits from. In this case, we get the ‘<prototype>’ property of function ‘f1’.
Our browser output will show:
function ()Now let us understand this.
JavaScript functions, be they regular functions, or constructor functions, are objects as seen previously. Every function is an object of type ‘Function’. Thus, we can consider all functions to be instances of the built-in class Function. Consequently, properties and behavior common to all functions are defined on Function.prototype.
Now one important point to note here is that Function.prototype is actually a function, not an object. This is according to the ES5 specification.
Our Function.prototype contains common methods like ‘apply’, ‘call’ and ‘bind’. We have already seen the action of the ‘call’ method in my post describing inheritance.
Function.prototype inherits from Object.prototype. This is reasonable, as functions are objects, and class Object is always at the top of the JavaScript prototype chain. To verify this, type in the following code:
console.log(Object.getPrototypeOf(Function.prototype)===Object.prototype);
Our browser output will be ‘true’, proving that Function, prototype inherits from Object.prototype.
Wrapping up
To wrap up, let us examine the complete object model discussed in this post. Observe the below diagram.
Our function ‘f1’ inherits its properties from Function.prototype. Function.prototype inherits from Object.prototype. Thus, functions defined on Object.prototype are available to ‘f1’. Verify this by executing:
console.log(f1.toString());
The browser output will be:
Leave a Reply