Instanceof in case of function in JavaScript

Question

The first question I was asked in the interview, and to be honest, I saw that I was really confused and showed the door,

Consider the fragments:

Case a:

var sayHello = new Function("alert('Hello there');"); alert(sayHello instanceof Function); // true alert(sayHello instanceof Object); // true, since every // object inherits from Object 

Case b:

  var myFunction = function(){ } var ins = new myFunction(); alert(ins instanceof myFunction); // ofcourse, true alert(myFunction instanceof Function); // true alert(ins instanceof Function); // false, Why is this not true? 

As I understand it, the Function should be in the prototype chain ins ?

 ins <-- myFunction <-- Function <-- Object 

Answer 1

You seem to misinterpret new here in Javascript.

 new myFunction() 

does not create a new instance of the function. Rather, it creates a new object that inherits from myFunction.prototype and calls myFunction , passing the object as this to the function.

Thus, you really did not create a new instance of the function, your ins not a function. You can easily verify this by trying to pretend that it is:

 var myFunction = function(){ } var ins = new myFunction(); ins(); <-- error, ins is not a function 

Since this is not a function, why do you expect Function be in the prototype chain?

Answer 2

So you have it close, but not quite. The prototype chain actually looks like this:

 ins <-- myFunction.prototype <-- Object 

As you can see, an ins object is inherited from a particular function prototype, not directly from a function.

So, in essence, ins is not an instance of myFunction, since an instance of myFunction.prototype .

This can be shown more clearly, because when you add functions to myFunction.prototype they are bound to the object instance after it is created.

For an excellent source of information on what is happening, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new This explains the behavior completely.

Answer 3

ins not an instanceof Function because you declare it as an instance ( new myFunction ). So this is instance myFunction.

Just a myFunction link:

 var myFunction = function(){}; var res = document.querySelector('#result'); var ins = myFunction; res.textContent = ['ins instanceof myFunction: ',ins instanceof myFunction, '\nmyFunction instanceof Function: ', myFunction instanceof Function, '\nins instanceof Function: ', ins instanceof Function].join(''); 

 <pre id="result"></pre> 

Answer 4

The catch you fall into is that you assume that the instanceof operator is transitive. You write

 ins <-- myFunction <-- Function <-- Object 

and conclude that it is also true that

 ins <-- Function 

True that

 myFunction <-- Object 

but this is not related to a transitive instance.

In fact, the rule for instanceof is that if a instanceof b and b.prototype instanceof c follows that a instanceof c , but it is not required that b instanceof c . Take a look at this example:

 function func() {} function superFunc() {} func.prototype = new superFunc(); var x = new func(); 

Now x is an instance of func and superFunc , but func not an instance of superFunc . In other languages, you better say func is a subclass of superFunc .