relation between Function and function in javascript

Question

I would like to understand the relation between Function and function in javascript.

Let me make an example:

Function.prototype.bind // function () { [native code] }

var foo = function () {};
foo.bind; //function () { [native code] }

My question is
Function.prototype.bind and foo.bind refers to the same code?
If yes, can someone explain me the relation?

Answer 1

Yes, the prototype of any function() {} always points to the Function prototype. An easy way to find out is checking with using deep equality:

var foo = function () {};
foo.bind === Function.prototype.bind // -> true

You can actually create a Function instance using the new operator and passing the body and arguments (although this is really not recommended):

var f = new Function("return 'hello world'");
f() // -> hello world

Answer 2

Maybe you, just like me some weeks ago, are wondering about the difference between adding a function to this (inside the outer function) and adding it via the prototype keyword. The key difference is, that the later is only added once to the prototype object, while the first (where you assign the new function to this and return this) is added every time you make a new instance of your function(object).

I found this post really good: Use of 'prototype' vs. 'this' in JavaScript?

Answer 3

Yep, check it out:

> (function (){}).bind === Function.prototype.bind
true

And to prove it's not just doing string equality:

> (function(){} === function(){})
false
> ((""+function(){}) === (""+function(){}))
true    

This is because the internal [[Prototype]] field of any function (which can be accessed in Google Chrome with __proto__) will always be Function.prototype:

> Function.prototype
function Empty() {}
> (function (){}).__proto__
function Empty() {}
> Function.prototype === (function (){}).__proto__
true

If a field of a given name is looked up in an object and not found, the prototype inheritance chain is followed until you get to an object that does have that field. In this case, our function doesn't have a bind property, so bind is taken from the prototype:

> (function (){}).__proto__.bind
function bind() { [native code] }

Answer 4

All JavaScript function [objects] (like foo) are instances of the Function constructor, and inherit from the Function.prototype. You can easily check it:

> (function foo(){…}) instanceof Function
true
> (function foo(){…}).bind === Function.prototype.bind
true

Answer 5

Function.prototype.bind and foo.bind refers to the same code?

Absolutely! You might have come across a phrase like JavaScript is a functional language or in JS, functions are first class objects. That means that the logic of properties and methods apply to functions, just as they do for any object (Arrays, Date, Object,...)
The main Function hold the prototype that defines all basic properties and methods that all functions have. Rather than assigning new function objects to each function, it's just far more efficient to assign them to 1 object, to which all function objects points.

This means, like other have pointed out here:

function foo()
{};
foo.bind === Function.prototype.bind;

But this also means that you can augment both the prototype and the individual function objects:

Function.prototype.getName = function()
{
    return this.name;
}
foo.getName();//foo

Again, here foo.getName === Function.prototype.getName, but once we assign directly to a single function object:

foo.getName = function(){ return 'bar';};

It stands to reason that foo.getName !== Function.prototype.getName... just play around with the Function prototype, and how it affects the behaviour of each function individually. It's good fun ;P