0
function Circle(radius) {
    this.radius = radius;
}

I am trying to understand Objects and prototypes by playing with console. When i tried "Circle", it gave the function. But when i tried Circle.prototype it gave an object. How did Circle got prototype property. it has Constructor and prototype of Object in it. Can some one explain this heirarchy

enter image description here

lch
  • 4,569
  • 13
  • 42
  • 75

4 Answers4

2

When you create new function, JS will create new function object with the properties name, length and prototype. The name is the function name, the length is the number of arguments, and the prototype is a reference to a new object that JS create with a constructor property that is reference to the first function object. So when you create a function, you actually create 2 new objects, the function object and the prototype object.

For more information, please see this 30 minutes lecture:

http://www.objectplayground.com/

If you want just the function section, go to minute 16:40.

sidanmor
  • 5,079
  • 3
  • 23
  • 31
1

I think the misunderstanding arises when you read that someone write "every object has a prototype property".

Functions In Javascript are objects. Like every objects, functions have some properties and methods and some of them are defined by default: the length property, the prototype property, the call() apply() and bind() methods and so on. So, a function has a prototype property, by default

function myfunc(){
   return "yes I'm a function";
}

//I said that function are objects having properties and methods
//this means you can call them, for example
myfunc.prototype 

and you will see that the value you have in return from calling this property is an object. Ok, stop here about functions for now.

Now, you can use any function as a constructor, so you can create a new object calling the function together with the new keyword

var myobj = new myfunc()

and you will have a new object. This object has not a prototype property by default

myobj.proptotype //=> unefined

we can't speak of a prototype property for an object: functions have a prototype property, objects don't.

But, each object it's associated with a prototype object from which properties and methods are inherited. Do you want to see what's the value of the prototype object? One of the solutions is

myobj.__proto__

and you will see the value of the prototype object of your custom object.

Now, take a look at the value of myobj.__proto__ and the value of myfunc.prototype: they are the same. This simply means that the prototype property of the constructor (in other words, the prototype property of the function you use with the new keyword in order to create a new object) is used as the prototype of the new object.

Keep that in mind.

Functions are objects, so functions have properties and methods by default.

Functions have a prototype property.

You use functions as constructors, to create new object.

Objects have not a prototype property.

Objects have a prototype object.

The prototype object value it's the same as the prototype property of the constructor.

marco
  • 1,152
  • 1
  • 9
  • 20
0

To use your code to create a circle, you would use new Circle(10);, or if you want to use that circle later, var circ = new Circle(10);. That will create a new circle object for you to use as you wish.

Circle is a function, another kind of variable or object. You set Circle, and now when you type Circle, it will return the function itself. Not a new circle. Every single function has a few properties, and prototype is one of them.

The prototype object is a part of every function, used for working with classes. You can read about it here.

Howzieky
  • 829
  • 7
  • 18
0

In Javascript, a function is an object. Every object has a "secret" prototype property attached to it. In your case Circle's prototype is the Function's prototype because Circle is a function. The root object that every object derives from is the Object object so if you can walk up the prototype chain until you reach the Object object. If you intend to use Cirle as a constructor and call it with new, this means that you will create other objects that are going to be instances of Circle and their prototype will point to Circle.prototype. For more detailed explanation on how prototypes work, there are very good resources online. For example you can read this: http://eloquentjavascript.net/ the chapter about Data structures: Objects and Arrays.

You can check the prototype of Circle by doing Object.getPrototypeOf(Circle) to confirm that this will be the Function prototype.

Theodoros Klikas
  • 2,059
  • 1
  • 11
  • 7