1
var foo = function(){alert('foo')}
function bar(){alert('bar')}

Why does foo.prototype point to Object, but the named function bar.prototype points to itself?

I should add that this behavior is observed from browser console.

zrooda
  • 3,610
  • 1
  • 30
  • 38
  • Sorry. What are you trying to say? Both `foo.prototype` and `bar.prototype` should point to the `prototype` object of `foo` and `bar` respectively. – Aadit M Shah Dec 06 '12 at 13:18
  • Your question makes no sense - `foo.prototype` does not point to `Object` and `bar.prototype` does not point to `bar`: http://jsfiddle.net/2xkpC/ – Aadit M Shah Dec 06 '12 at 13:35
  • @AaditMShah You're right, but the Chrome console logs the function name when you ask for the function's prototype. I'll keep my answer deleted until I figure it out. – bfavaretto Dec 06 '12 at 13:37
  • 2
    @bfavaretto - The Chrome console logs the function name because the `prototype` object of a function has a property called `constructor` which points back to the function. All functions have a property called `name` which holds the name of the function. For unnamed functions the Chrome console simply prints out `Object` instead of an empty string. – Aadit M Shah Dec 06 '12 at 13:40
  • 1
    See the following answer for more information about JavaScript inheritance and the `prototype` property: http://stackoverflow.com/a/8096017/783743 – Aadit M Shah Dec 06 '12 at 13:41

2 Answers2

5

If you're using a console such a Chrome to log the value of a prototype object then I suggest you don't. The Chrome console, like other browser consoles, formats the output of the prototype object.

So for a named function it will log the name of the function, but for an unnamed function it will simply log Object. This does not mean that the prototype of the function points to Object or the function itself. It's just that that's what the console is showing you (someone should sue them for that). See for yourself: http://jsfiddle.net/2xkpC/

How does it know the name of a function from it's prototype? Well, the prototype of a function has a property called constructor which points back to the function itself, and the name of the function is stored as a string in a property called name on the function. So if you log a prototype object then it will display prototype.constructor.name || "Object":

var foo = function(){alert('foo')}
console.log(foo.prototype); // logs "Object"

function bar(){alert('bar')}
console.log(bar.prototype); // logs bar.prototype.constructor.name

See the demo here: http://jsfiddle.net/4bWfn/

If you open your console and click that triangle near the logged output then you'll see the constructor and the __proto__ properties of the prototype object. Under constructor you'll also see the name property.

To know more about inheritance in JavaScript and the prototype object read this answer: https://stackoverflow.com/a/8096017/783743

Community
  • 1
  • 1
Aadit M Shah
  • 72,912
  • 30
  • 168
  • 299
  • Agree, the console's behavior is very misleading. Possible reason for this behavior is to log the constructor's name for new instances, i.e., `var b = new bar(); console.log(b); // bar`. – bfavaretto Dec 06 '12 at 14:46
-1

Because var foo in your example it is pointer to anonymous function.

compare to

var foo = function me(){alert('foo');}
test=foo;
console.log(test.prototype);

here var foo is pointer to named function.

zb'
  • 8,071
  • 4
  • 41
  • 68
  • `function(){//do something}` itself anonymous function regradless of context, there is no reason to devide that to two different types – zb' Dec 06 '12 at 13:27
  • yes, my example is to compare to OP example, my example shows named function, it is almost equal to answer of @bfavaretto – zb' Dec 06 '12 at 13:28