By 0x90

2012-03-31 21:13:13 8 Comments

This figure again shows that every object has a prototype. Constructor function Foo also has its own __proto__ which is Function.prototype, and which in turn also references via its __proto__ property again to the Object.prototype. Thus, repeat, Foo.prototype is just an explicit property of Foo which refers to the prototype of b and c objects.

var b = new Foo(20);
var c = new Foo(30);

What are the differences between __proto__ and prototype?

enter image description here

The figure was taken from


@tksilicon 2020-05-07 07:58:08

This is a very important question relevant to anyone who wants to understand prototypical inheritance. From what I understand, prototype is assigned by default when an object is created with new from a function because Function has prototype object by definition:

function protofoo(){
var protofoo1 = new protofoo();
console.log(protofoo.prototype.toString()); //[object Object]

When we create an ordinary object without new, ie explicitly from a function, it doesn't have prototype but it has an empty proto which can be assigned a prototype.

var foo={
  check: 10
console.log(foo.__proto__); // empty
console.log(bar.prototype); //  TypeError
foo.__proto__ = protofoo1; // assigned
console.log(foo.__proto__); //protofoo

We can use Object.create to link an object explicitly.

// we can create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.fooprops= "We checking prototypes";
console.log(bar.__proto__); // "foo"
console.log(bar.fooprops); // "We checking prototypes"
console.log(bar.check); // 10 is delegated to `foo`

@Lior Elrom 2015-09-23 12:49:19

Prototype VS. __proto__ VS. [[Prototype]]

When creating a function, a property object called prototype is being created automatically (you didn't create it yourself) and is being attached to the function object (the constructor).
Note: This new prototype object also points to, or has an internal-private link to, the native JavaScript Object.


function Foo () { = 'John Doe';

// Foo has an object property called prototype.
// prototype was created automatically when we declared the function Foo.
Foo.hasOwnProperty('prototype'); // true

// Now, we can assign properties and methods to it:
Foo.prototype.myName = function () {
    return 'My name is ' +;

If you create a new object out of Foo using the new keyword, you are basically creating (among other things) a new object that has an internal or private link to the function Foo's prototype we discussed earlier:

var b = new Foo();

b.[[Prototype]] === Foo.prototype  // true

The private linkage to that function's object called double brackets prototype or just [[Prototype]]. Many browsers are providing us a public linkage to it that called __proto__!

To be more specific, __proto__ is actually a getter function that belong to the native JavaScript Object. It returns the internal-private prototype linkage of whatever the this binding is (returns the [[Prototype]] of b):

b.__proto__ === Foo.prototype // true

It is worth noting that starting of ECMAScript5, you can also use the getPrototypeOf method to get the internal private linkage:

Object.getPrototypeOf(b) === b.__proto__ // true

NOTE: this answer doesn't intend to cover the whole process of creating new objects or new constructors, but to help better understand what is __proto__, prototype and [[Prototype]] and how it works.

@Lior Elrom 2017-09-08 02:20:46

@Taurus, click on the header, it leads to the ECMAScript specifications doc. Check out section 9 (Ordinary and Exotic Objects Behaviours) which explain it in much more details.

@Koray Tugay 2020-03-10 02:07:50

I think there is some mistake here: _ a new object that has an internal or private link to the function's prototype Foo_ Do you mean: a new object that has an internal or private link to the function Foo 's prototype ?

@Lior Elrom 2020-03-10 02:19:03

Thanks @KorayTugay! Yes, I misspelled it :) +1

@sid_k_reddy 2013-08-10 15:27:32

Prototype property is created when a function is declared.

For instance:

 function Person(dob){
    this.dob = dob

Person.prototype property is created internally once you declare above function. Many properties can be added to the Person.prototype which are shared by Person instances created using new Person().

// adds a new method age to the Person.prototype Object.
Person.prototype.age = function(){return date-dob}; 

It is worth noting that Person.prototype is an Object literal by default (it can be changed as required).

Every instance created using new Person() has a __proto__ property which points to the Person.prototype. This is the chain that is used to traverse to find a property of a particular object.

var person1 = new Person(somedate);
var person2 = new Person(somedate);

creates 2 instances of Person, these 2 objects can call age method of Person.prototype as person1.age, person2.age.

In the above picture from your question, you can see that Foo is a Function Object and therefore it has a __proto__ link to the Function.prototype which in turn is an instance of Object and has a __proto__ link to Object.prototype. The proto link ends here with __proto__ in the Object.prototype pointing to null.

Any object can have access to all the properties in its proto chain as linked by __proto__ , thus forming the basis for prototypal inheritance.

__proto__ is not a standard way of accessing the prototype chain, the standard but similar approach is to use Object.getPrototypeOf(obj).

Below code for instanceof operator gives a better understanding:

object instanceof Class operator returns true when an object is an instance of a Class, more specifically if Class.prototype is found in the proto chain of that object then the object is an instance of that Class.

function instanceOf(Func){
  var obj = this;
  while(obj !== null){
    if(Object.getPrototypeOf(obj) === Func.prototype)
      return true;
    obj = Object.getPrototypeOf(obj);
  return false;

The above method can be called as:, Class) which return true if object is instance of Class.

@abhisekp 2016-07-01 16:08:32

I was wondering why was the prototype object created internally in the first place? Could one simply assign static methods to the function object itself. e.g. function f(a){this.a = a}; f.increment = function(){return ++this.a}? Why wasn't this way chosen over adding the methods to prototype object? This will work if f.__proto__ = g where g is the base class.

@abhisekp 2016-07-01 16:10:29

Maybe prototype object was choosen for sharing because only the exclusive function constructor properties can be stored in function constructor object.

@abhisekp 2016-07-01 16:58:25

Actually, that would be a mess because instanceof would result in ({}) instanceof Function === true as there would be no way to differentiate between prototypes if the prototype property is removed.

@doubleOrt 2017-09-07 21:22:01

@abhisekp What do you mean by this: "This will work if f.__proto__ = g where g is the base class." I don't know if this has some meaning i don't understand, but if you were to add the properties and methods in that way, then when you used the new keyword to create an instance, the properties and methods wouldn't be copied over.

@Fouad Boukredine 2019-09-17 17:09:26

There is only one object that is used for protypal chaining. This object obviously has a name and a value: __proto__ is its name, and prototype is its value. That's all.

to make it even easier to grasp, look at the diagram on the top of this post (Diagram by dmitry soshnikov), you'll never find __proto__ points to something else other than prototype as its value.

The gist is this: __proto__ is the name that references the prototypal object, and prototype is the actual prototypal object.

It's like saying:

let x = {name: 'john'};

x is the object name (pointer), and {name: 'john'} is the actual object (data value).

NOTE: this just a massively simplified hint on how they are related on a high level.

Update: Here is a simple concrete javascript example for better illustration:

let x = new String("testing") // Or any other javascript object you want to create

Object.getPrototypeOf(x) === x.__proto__; // true

This means that when Object.getPrototypeOf(x) gets us the actual value of x (which is its prototype), is exactly what the __proto__ of x is pointing to. Therefore __proto__ is indeed pointing to the prototype of x. Thus __proto__ references x (pointer of x), and prototype is the value of x (its prototype).

I hope it's a bit clear now.

@theshinylight 2019-11-26 17:08:55

I've made for myself a small drawing that represents the following code snippet:

var Cat = function() {}
var tom = new Cat()

Understanding __proto__ and prototype

I have a classical OO background, so it was helpful to represent the hierarchy in this manner. To help you read this diagram, treat the rectangles in the image as JavaScript objects. And yes, functions are also objects. ;)

Objects in JavaScript have properties and __proto__ is just one of them.

The idea behind this property is to point to the ancestor object in the (inheritance) hierarchy.

The root object in JavaScript is Object.prototype and all other objects are descendants of this one. The __proto__ property of the root object is null, which represents the end of inheritance chain.

You'll notice that prototype is a property of functions. Cat is a function, but also Function and Object are (native) functions. tom is not a function, thus it does not have this property.

The idea behind this property is to point to an object which will be used in the construction, i.e. when you call the new operator on that function.

Note that prototype objects (yellow rectangles) have another property called constructor which points back to the respective function object. For brevity reasons this was not depicted.

Indeed, when we create the tom object with new Cat(), the created object will have the __proto__ property set to the prototype object of the constructor function.

In the end, let us play with this diagram a bit. The following statements are true:

  • tom.__proto__ property points to the same object as Cat.prototype.

  • Cat.__proto__ points to the Function.prototype object, just like Function.__proto__ and Object.__proto__ do.

  • Cat.prototype.__proto__ and tom.__proto__.__proto__ point to the same object and that is Object.prototype.


@StackOverflow UI 2019-12-23 17:25:52

Very well explained!

@aXuser264 2020-01-20 11:57:10

@theshinylight, tom.__proto__ and Cat.prototype are stricly equal, So, tom.__proto__ === Cat.prototype And Cat.prototype === tom.__proto__ are true. So, what did you mean by the arrow in the image ??

@theshinylight 2020-01-21 12:00:42

The black arrow (if you are referring to it) has no particular meaning, other than the property of the object. So prototype is property of the Cat object (from your question).

@Himansh 2019-08-02 04:35:14

As this rightly stated

__proto__ is the actual object that is used in the lookup chain to resolve methods, etc. prototype is the object that is used to build __proto__ when you create an object with new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

We can further note that __proto__ property of an object created using function constructor points towards the memory location pointed towards by prototype property of that respective constructor.

If we change the memory location of prototype of constructor function, __proto__ of derived object will still continue to point towards the original address space. Therefore to make common property available down the inheritance chain, always append property to constructor function prototype, instead of re-initializing it (which would change its memory address).

Consider the following example:

function Human(){
    this.speed = 25;

var himansh = new Human();

Human.prototype.showSpeed = function(){
    return this.speed;

himansh.__proto__ === Human.prototype;  //true
himansh.showSpeed();    //25

//now re-initialzing the Human.prototype aka changing its memory location
Human.prototype = {lhs: 2, rhs:3}

//himansh.__proto__ will still continue to point towards the same original memory location. 

himansh.__proto__ === Human.prototype;  //false
himansh.showSpeed();    //25

@Mark Kahn 2012-03-31 21:16:59

__proto__ is the actual object that is used in the lookup chain to resolve methods, etc. prototype is the object that is used to build __proto__ when you create an object with new:

( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;

@rvighne 2014-08-06 00:43:08

Ah! So prototype is not available on the instances themselves (or other objects), but only on the constructor functions.

@Tarik 2014-09-27 19:05:55

@rvighne: prototype is only available on functions since they are derived from Function, Function, and Object but in anything else it is not. However, __proto__ is available everywhere.

@Alex_Nabu 2015-07-29 03:38:10

So __proto__ is the actual object that is saved and used as the prototype while Myconstructure.prototype is just a blueprint for __proto__ which, is infact the actual object saved and used as the protoype. Hence myobject.prototype wouldnt be a property of the actual object because its just a temporary thing used by the constructor function to outline what myobject.__proto__ should look like.

@Alex_Nabu 2015-07-29 03:49:45

Probably one of those things build into the language when it was trying to imitate classical oop. If it wasn't we would perhaps instead have seen something more along the lines of var mycar = Object.Createfrom(car.__proto__); when creating objects. More true to a prototypical style of programming.

@Niko Bellic 2015-08-19 02:10:52

Is it fair to say that the __proto__ property of an object is a pointer to the object's constructor function's prototype property? i.e. foo.__proto__ === foo.constructor.prototype

@seangwright 2016-02-10 02:56:52

@Alex_Nabu Not quite. newCar.__proto__ IS Car.prototype, not an instance of Car.prototype. While Car.protoype IS an instance of an object. Car.prototype is not something that gives newCar any properties or structure, it simply IS the next object in newCar's prototype chain. Car.prototype is not a temporary object. It is the object that is set as the value of the __proto__ property of any new objects made using Car as a constructor. If you want to think of anything as a blueprint object, think of Car as a blueprint for new car-objects.

@Mikhail Batcer 2016-04-29 10:54:48

Why can't I change, for example, __proto__ of a string to an array instance: s = "foo"; a = []; s.__proto__ = a; ?

@Mark Kahn 2016-04-29 17:36:57

@MikhailBatcer -- Primitives in JS are a special case. Whenever you access them they're effectively converted into an instance of the appropriate class type and then the ops are run on that. So after the code you wrote, s.__proto__ is something close to (new String(s)).__proto__. If you replaced your first statement with s = new String('foo'), it'd work. It's just this weird quirk in JS

@Daniel 2016-10-05 11:18:54

@Niko Bellic Gotcha! It's fair to say that proto property of an object is a pointer to the object's constructor function's prototype property, but that's not fully right (at least if you replace the prototype of a non native constructor by a primitive value literal i.e: '' || 0 || true afaik)! I tested this on Chrome and it returned something different: function MyConstructor () {} MyConstructor.prototype = ''; (new MyConstructor).__proto__ !== MyConstructor.prototype. I think the browser fails to create proto with a primitive literal, creating it with Object.prototype

@Daniel 2016-10-05 11:23:54

@Niko Bellic Actually it doesn't create it with Object.prototype either, I may need to look at this for a little long, to give a more precise answer! However (new MyConstructor).__proto__ is actually the same as (new MyConstructor).constructor.prototype!

@Mark Kahn 2016-10-06 02:13:34

@Daniel - There are so many ways to break JavaScript, but honestly I don't see the point in discussing edge cases that no sane person would ever hit! :)

@mplwork 2020-01-13 16:19:17

This is the best answer I've seen . Really to the point without any fuss.

@Willem van der Veen 2018-08-17 17:37:23


The __proto__ property of an object is a property that maps to the prototype of the constructor function of the object. In other words:

instance.__proto__ === constructor.prototype // true

This is used to form the prototype chain of an object. The prototype chain is a lookup mechanism for properties on an object. If an object's property is accessed, JavaScript will first look on the object itself. If the property isn't found there, it will climb all the way up to protochain until it is found (or not)


function Person (name, city) { = name;

Person.prototype.age = 25;

const willem = new Person('Willem');

console.log(willem.__proto__ === Person.prototype); // the __proto__ property on the instance refers to the prototype of the constructor

console.log(willem.age); // 25 doesn't find it at willem object but is present at prototype
console.log(willem.__proto__.age); // now we are directly accessing the prototype of the Person function 

Our first log results to true, this is because as mentioned the __proto__ property of the instance created by the constructor refers to the prototype property of the constructor. Remember, in JavaScript, functions are also Objects. Objects can have properties, and a default property of any function is one property named prototype.

Then, when this function is utilized as a constructor function, the object instantiated from it will receive a property called __proto__. And this __proto__ property refers to the prototype property of the constructor function (which by default every function has).

Why is this useful?

JavaScript has a mechanism when looking up properties on Objects which is called 'prototypal inheritance', here is what it basically does:

  • First, it's checked if the property is located on the Object itself. If so, this property is returned.
  • If the property is not located on the object itself, it will 'climb up the protochain'. It basically looks at the object referred to by the __proto__ property. There, it checks if the property is available on the object referred to by __proto__.
  • If the property isn't located on the __proto__ object, it will climb up the __proto__ chain, all the way up to Object object.
  • If it cannot find the property anywhere on the object and its prototype chain, it will return undefined.

For example:

function Person (name) { = name;

let mySelf = new Person('Willem');

console.log(mySelf.__proto__ === Person.prototype);

console.log(mySelf.__proto__.__proto__ === Object.prototype);

@Nitin Jadhav 2018-12-16 02:38:57

Explanatory example:

function Dog(){}
Dog.prototype.bark = "woof"

let myPuppie = new Dog()

now, myPupppie has __proto__ property which points to Dog.prototype.

> myPuppie.__proto__
>> {bark: "woof", constructor: ƒ}

but myPuppie does NOT have a prototype property.

> myPuppie.prototype
>> undefined

So, __proto__ of mypuppie is the reference to the .prototype property of constructor function that was used to instantiate this object (and the current myPuppie object has "delegates to" relationship to this __proto__ object), while .prototype property of myPuppie is simply absent (since we did not set it).

Good explanation by MPJ here: proto vs prototype - Object Creation in JavaScript

@AL-zami 2016-12-27 10:31:54

In JavaScript, a function can be used as a constructor. That means we can create objects out of them using the new keyword. Every constructor function comes with a built-in object chained with them. This built-in object is called a prototype. Instances of a constructor function use __proto__ to access the prototype property of its constructor function.

prototype diagram

  1. First we created a constructor: function Foo(){}. To be clear, Foo is just another function. But we can create an object from it with the new keyword. That's why we call it the constructor function

  2. Every function has a unique property which is called the prototype property. So, Constructor function Foo has a prototype property which points to its prototype, which is Foo.prototype (see image).

  3. Constructor functions are themselves a function which is an instance of a system constructor called the [[Function]] constructor. So we can say that function Foo is constructed by a [[Function]] constructor. So, __proto__ of our Foo function will point to the prototype of its constructor, which is Function.prototype.

  4. Function.prototype is itself is nothing but an object which is constructed from another system constructor called [[Object]]. So, [[Object]] is the constructor of Function.prototype. So, we can say Function.prototype is an instance of [[Object]]. So __proto__ of Function.prototype points to Object.prototype.

  5. Object.prototype is the last man standing in the prototype chain. I mean it has not been constructed. It's already there in the system. So its __proto__ points to null.

  6. Now we come to instances of Foo. When we create an instance using new Foo(), it creates a new object which is an instance of Foo. That means Foo is the constructor of these instances. Here we created two instances (x and y). __proto__ of x and y thus points to Foo.prototype.

@Shaz 2019-01-15 02:43:57

Just to be clear: instances do no have .prototype property? Only the constructor function right? ... So a difference between an instance and its constructor function is: constructor functions have both 1. proto 2. .prototype object while the instances only have .__proto__ property... correct?

@AL-zami 2019-01-15 05:59:01

@Shaz you are right. instances uses their proto to access the prototype property of their constructor function.

@Shaz 2019-01-15 06:06:04

But why why is it when you write: var car = Object.create(Vehicle); you will get car.__proto__ = Vehicle BUT you also get a car.prototype property that points to Vehicle.prototype ?

@AL-zami 2019-01-15 07:53:57

@shaz can you provide a jsfiddle so that i can visualize the situation?

@Shaz 2019-01-15 08:22:14 Here it is... check out the car and car2 as examples. Any ideas?

@AL-zami 2019-01-15 08:35:01

here car.prototype is an inherited property. car inherits 'prototype' property from vehicle function. so car.prototype === vehicle.prototype. " prototype" property is a property on vehicle. car can access it through its prototype chain. I hope this will clear your confusion

@Shaz 2019-01-15 08:57:16

OH I see. New to JavaScript world, your answer is so good. Quickly, is it a common practice to write: Object.create(Vehicle) OR Object.create(Vehicle.prototype)... I am guessing the latter is more popular use case - in your experience?

@林奕忠 2018-08-05 08:43:45

 JavaScript prototype vs __prototype__

'use strict'
function A() {}
var a = new A();
class B extends A {}
var b = new B();
console.log('====='); // =====
console.log(B.__proto__ === A); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(b.__proto__ === B.prototype); // true
console.log(a.__proto__ === A.prototype); // true
console.log(A.__proto__ === Function.__proto__); // true
console.log(Object.__proto__ === Function.__proto__); // true
console.log(Object.prototype === Function.__proto__.__proto__); // true
console.log(Object.prototype.__proto__ === null); // true

In JavaScript, Every object(function is object too!) has a __proto__ property, the property is reference to its prototype.

When we use the new operator with a constructor to create a new object, the new object's __proto__ property will be set with constructor's prototype property, then the constructor will be call by the new object, in that process "this" will be a reference to the new object in the constructor scope, finally return the new object.

Constructor's prototype is __proto__ property, Constructor's prototype property is work with the new operator.

Constructor must be a function, but function not always is constructor even if it has prototype property.

Prototype chain actually is object's __proto__ property to reference its prototype, and the prototype's __proto__ property to reference the prototype's prototype, and so on, until to reference Object's prototype's __proto__ property which is reference to null.

For example:

console.log(a.constructor === A); // true
// "a" don't have constructor,
// so it reference to A.prototype by its ``__proto__`` property,
// and found constructor is reference to A

[[Prototype]] and __proto__ property actually is same thing.

We can use Object's getPrototypeOf method to get something's prototype.

console.log(Object.getPrototypeOf(a) === a.__proto__); // true

Any function we written can be use to create an object with the new operator, so anyone of those functions can be a constructor.

@Jyoti Duhan 2018-07-13 04:34:41

__proto__ is the base to construct prototype and a constructor function eg: function human(){} has prototype which is shared via __proto__ in the new instance of the constructor function. A more detailed read here

@Jyoti Duhan 2018-07-13 12:18:00

@Derick Daniel: not sure why you down voted this but the edit you made was not that I was trying to convey. Edited it further for more clearance :).

@Freelancer 2018-07-13 14:16:20

Jyoti, i did not down vote your answer, someone else did, i just edited it :)

@Timur 2018-07-18 14:55:34

      let a = function(){console.log(this.b)};
      a.prototype.b = 1;
      a.__proto__.b = 2;
      let q = new a();

Try this code to understand

@Manishz90 2017-02-02 12:50:48

To explain let us create a function

 function a (name) { = name;

When JavaScript executes this code, it adds prototype property to a, prototype property is an object with two properties to it:

  1. constructor
  2. __proto__

So when we do

a.prototype it returns

     constructor: a  // function definition
    __proto__: Object

Now as you can see constructor is nothing but the function a itself and __proto__ points to the root level Object of JavaScript.

Let us see what happens when we use a function with new key word.

var b = new a ('JavaScript');

When JavaScript executes this code it does 4 things:

  1. It creates a new object, an empty object // {}
  2. It creates __proto__ on b and makes it point to a.prototype so b.__proto__ === a.prototype
  3. It executes a.prototype.constructor (which is definition of function a ) with the newly created object (created in step#1) as its context (this), hence the name property passed as 'JavaScript' (which is added to this) gets added to newly created object.
  4. It returns newly created object in (created in step#1) so var b gets assigned to newly created object.

Now if we add = "BMW" and do, the output "BMW" appears.

this is because when JavaScript executed this code it searched for car property on b, it did not find then JavaScript used b.__proto__ (which was made to point to 'a.prototype' in step#2) and finds car property so return "BMW".

@doubleOrt 2017-09-07 21:36:12

1. constructor does not return a()! It returns a. 2. __proto__ returns Object.prototype, not the root object in Javascript.

@john-raymon 2019-06-21 23:11:50

This is a great answer!

@java-addict301 2020-05-06 15:05:15

+1 this is the best answer for explaining what prototype actually IS (an object with two properties) and how Javascript executes each piece of code. This info is surprisingly hard to come by.

@Barrard 2018-03-29 03:27:04

What about using __proto__ for static methods?

function Foo(name){ = name



var bar = new Foo('bar')
var baz = new Foo('baz')

Foo.collection // [{...}, {...}]
bar.count // undefined

@Andreas 2018-03-31 09:29:46

That's exactly why an answer to "__proto__ VS. prototype in JavaScript" ?

@Selva Ganapathi 2019-07-07 10:25:46

is it good or what about Foo.collection.push(this) Foo.count++

@Hassan Tareq 2017-09-14 06:43:57


prototype is a property of a Function. It is the blueprint for creating objects by using that (constructor) function with new keyword.


__proto__ is used in the lookup chain to resolve methods, properties. when an object is created (using constructor function with new keyword), __proto__ is set to (Constructor) Function.prototype

function Robot(name) { = name;
var robot = new Robot();

// the following are true   
robot.__proto__ == Robot.prototype
robot.__proto__.__proto__ == Object.prototype

Here is my (imaginary) explanation to clear the confusion:

Imagine there is an imaginary class (blueprint/coockie cutter) associated with function. That imaginary class is used to instantiate objects. prototype is the extention mechanism (extention method in C#, or Swift Extension) to add things to that imaginary class.

function Robot(name) { = name;

The above can be imagined as:

// imaginary class
class Robot extends Object{

    static prototype = Robot.class  
    // Robot.prototype is the way to add things to Robot class
    // since Robot extends Object, therefore Robot.prototype.__proto__ == Object.prototype

    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined; = name;



var robot = new Robot();

robot.__proto__ == Robot.prototype
robot.prototype == undefined
robot.__proto__.__proto__ == Object.prototype

Now adding method to the prototype of Robot:

Robot.prototype.move(x, y) = function(x, y){ Robot.position.x = x; Robot.position.y = y};
// Robot.prototype.move(x, y) ===(imagining)===> Robot.class.move(x, y)

The above can be imagined as extension of Robot class:

// Swift way of extention
extension Robot{
    function move(x, y){    
        Robot.position.x = x; Robot.position.y = y

Which in turn,

// imaginary class
class Robot{

    static prototype = Robot.class // Robot.prototype way to extend Robot class
    var __proto__;

    var name = "";

    // constructor
    function Robot(name) {

        this.__proto__ = prototype;
        prototype = undefined; = name;

    // added by prototype (as like C# extension method)
    function move(x, y){ 
        Robot.position.x = x; Robot.position.y = y

@Dmitry 2018-04-01 22:56:05

still thinking of more coherent names for __proto__ and prototype. maybe prototype and inheritance?

@Hassan Tareq 2018-04-02 01:16:08

I would say, prototype & __proto__ both should be avoided. We have class now and I like OOP.

@Dmitry 2018-04-02 01:20:14

the problem is that class is relatively new and it isn't supported by really convenient engines like microsoft JScript(nice to have when working on C and need a quick and dirty script engine that's always there), and nashorn javascript(which comes with all new Java installations under jjs and is a nice way of putting Java into a pure dynamic environment where you don't need to constantly recompile things). The thing is if class was sugar, it wouldn't be a problem, but it isn't, it offers things that are impossible without them in older js versions. Like extending "Function".

@Hassan Tareq 2018-04-02 01:24:25

Eventually we will get support. I am backend developer, so I don't have issues, I code in js rarely.

@Dmitry 2018-04-02 01:24:27

and inheriting static members in a way that adding new/removing static members from parent is noticed by child(which I can't think of a way to do on JScript, which doesn't offer Object.assign/__proto__/getPrototypeOf, so you have to tinker with the root Object.prototype to simulate it)

@Yad Smood 2015-05-12 02:58:11

Another good way to understand it:

var foo = {}

foo.constructor is Object, so foo.constructor.prototype is actually 
Object.prototype; Object.prototype in return is what foo.__proto__ links to. 
console.log(foo.constructor.prototype === foo.__proto__);
// this proves what the above comment proclaims: Both statements evaluate to true.
console.log(foo.__proto__ === Object.prototype);
console.log(foo.constructor.prototype === Object.prototype);

Only after IE11 __proto__ is supported. Before that version, such as IE9, you could use the constructor to get the __proto__.

@epeleg 2015-11-08 10:10:32

Only that I would write it the other way around: foo.__proto__ === foo.constructor.prototype

@ifyouseewendy 2017-07-02 23:14:14

I happen to be learning prototype from You Don't Know JS: this & Object Prototypes, which is a wonderful book to understand the design underneath and clarify so many misconceptions (that's why I'm trying to avoid using inheritance and things like instanceof).

But I have the same question as people asked here. Several answers are really helpful and enlightening. I'd also love to share my understandings.

What is a prototype?

Objects in JavaScript have an internal property, denoted in the specification as[[Prototype]], which is simply a reference to another object. Almost all objects are given a non-nullvalue for this property, at the time of their creation.

How to get an object's prototype?

via __proto__or Object.getPrototypeOf

var a = { name: "wendi" };
a.__proto__ === Object.prototype // true
Object.getPrototypeOf(a) === Object.prototype // true

function Foo() {};
var b = new Foo();
b.__proto__ === Foo.prototype
b.__proto__.__proto__ === Object.prototype

What is the prototype ?

prototype is an object automatically created as a special property of a function, which is used to establish the delegation (inheritance) chain, aka prototype chain.

When we create a function a, prototype is automatically created as a special property on a and saves the function code on as the constructor on prototype.

function Foo() {};
Foo.prototype // Object {constructor: function}
Foo.prototype.constructor === Foo // true

I'd love to consider this property as the place to store the properties (including methods) of a function object. That's also the reason why utility functions in JS are defined like Array.prototype.forEach() , Function.prototype.bind(), Object.prototype.toString().

Why to emphasize the property of a function?

{}.prototype // undefined;
(function(){}).prototype // Object {constructor: function}

// The example above shows object does not have the prototype property.
// But we have Object.prototype, which implies an interesting fact that
typeof Object === "function"
var obj = new Object();

So, Arary, Function, Objectare all functions. I should admit that this refreshes my impression on JS. I know functions are first-class citizen in JS but it seems that it is built on functions.

What's the difference between __proto__ and prototype?

__proto__a reference works on every object to refer to its [[Prototype]]property.

prototype is an object automatically created as a special property of a function, which is used to store the properties (including methods) of a function object.

With these two, we could mentally map out the prototype chain. Like this picture illustrates:

function Foo() {}
var b = new Foo();

b.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true

@Eduard 2017-06-15 10:42:37


(number inside the parenthesis () is a 'link' to the code that is written below)

prototype - an object that consists of:
=> functions (3) of this particular ConstructorFunction.prototype(5) that are accessible by each object (4) created or to-be-created through this constructor function (1)
=> the constructor function itself (1)
=> __proto__ of this particular object (prototype object)

__proto__ (dandor proto?) - a link BETWEEN any object (2) created through a particular constructor function (1), AND the prototype object's properties (5) of that constructor THAT allows each created object (2) to have access to the prototype's functions and methods (4) (__proto__ is by default included in every single object in JS)



    function Person (name, age) { = name;
        this.age = age;  



    var John = new Person(‘John’, 37);
    // John is an object


    Person.prototype.getOlder = function() {
    // getOlder is a key that has a value of the function





@Malkeet Singh 2017-04-05 18:26:38

Every function you create has a property called prototype, and it starts off its life as an empty object. This property is of no use until you use this function as constructor function i.e. with the 'new' keyword.

This is often confused with the __proto__ property of an object. Some might get confused and except that the prototype property of an object might get them the proto of an object. But this is not case. prototype is used to get the __proto__ of an object created from a function constructor.

In the above example:

function Person(name){ = name

var eve = new Person("Eve");

console.log(eve.__proto__ == Person.prototype) // true
// this is exactly what prototype does, made Person.prototype equal to eve.__proto__

I hope it makes sense.

@doubleOrt 2017-09-08 11:20:37

prototype is not used to create the __proto__ of an object. __proto__, when accessed, merely provides a reference to the prototype object.

@Maxmaxmaximus 2016-07-18 05:26:13


var q = {}
var prototype = {prop: 11}

q.prop // undefined
q.__proto__ = prototype
q.prop // 11

in function constructors javascript engine call this q.__proto__ = prototype automatically when we write new Class, and in to the __proto__ prop set Class.prototype

function Class(){}
Class.prototype = {prop: 999} // set prototype as we need, before call new

var q = new Class() // q.__proto__ = Class.prototype
q.prop // 999

Enjoy %)

@vladCovaliov 2017-01-12 07:58:31

I'll try a 4th grade explanation:

Things are very simple. A prototype is an example of how something should be built. So:

  • I'm a function and I build new objects similar to my prototype

  • I'm an object and I was built using my __proto__ as an example


function Foo() { }

var bar = new Foo()

// `bar` is constructed from how Foo knows to construct objects
bar.__proto__ === Foo.prototype // => true

// bar is an instance - it does not know how to create objects
bar.prototype // => undefined

@Christof Kälin 2017-02-12 18:19:27

Nope, neither prototype nor a __proto__ are used on any time as a blueprint or so to create any object. This is a myth introduced by the blurry class syntax and it's predecessors. As the answer-post says it's just used for the lookup-chain and in case of prototype to identify constructor used with new (which is part of that pretend-to-be-classy mechanism that is confusing many users including me).

@Nitin Jadhav 2018-12-16 02:30:14

The first point should be "I'm a function and I build new objects that will delegate to my prototype"

@debugmode 2016-09-23 16:59:50

I know, I am late but let me try to simplify it.

Let us say there is a function

    function Foo(message){

         this.message = message ; 


Foo function will have a prototype object linked. So,Whenever we create a function in JavaScript, it always has a prototype object linked to it.

Now let us go ahead and create two objects using the function Foo.

    var a = new Foo("a");
    var b = new Foo("b");
  1. Now we have two objects, object a and object b. Both are created using constructor Foo. Keep in mind constructor is just a word here.
  2. Object a and b both have a copy of message property.
  3. These two objects a and b are linked to prototype object of constructor Foo.
  4. On objects a and b, we can access Foo prototype using proto property in all browsers and in IE we can use Object.getPrototypeOf(a) or Object.getPrototypeOf(b)

Now, Foo.prototype, a.proto, and b.proto all denotes same object.

    b.__proto__ === Object.getPrototypeOf(a);
    a.__proto__ ===  Foo.prototype;
    a.constructor.prototype  === a.__proto__;

all of above would return true.

As we know, in JavaScript properties can be added dynamically. We can add property to object

    Foo.prototype.Greet = function(){


As you see we added Greet() method in Foo.prototype but it is accessible in a and b or any other object which is constructed using Foo.

While executing a.Greet(), JavaScript will first search Greet in object a on property list. On not finding , it will go up in proto chain of a. Since a.proto and Foo.prototype is same object, JavaScript will find Greet() method and execute it.

I hope, now prototype and proto is simplified a bit.

@serkan 2015-10-07 19:26:34

To make it a little bit clear in addition to above great answers:

function Person(name){ = name

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

Instances have __proto__, classes have prototype.

@akodevs 2015-11-19 04:48:01

Prototype or Object.prototype is a property of an object literal. It represents the Object prototype object which you can override to add more properties or methods further along the prototype chain.

__proto__ is an accessor property (get and set function) that exposes the internal prototype of an object thru which it is accessed.




@doubleOrt 2017-09-07 21:52:00

Object.prototype is not a property of an object literal, trying to print out {}.prototype returns undefined; however, it can be accessed via {}.__proto__, which returns Object.prototype.

@Andreas Bergström 2015-10-24 07:23:17

To put it simply:

> var a = 1
> a.__proto__
[Number: 0]
> Number.prototype
[Number: 0]
> Number.prototype === a.__proto__

This allows you to attach properties to X.prototype AFTER objects of type X has been instantiated, and they will still get access to those new properties through the __proto__ reference which the Javascript-engine uses to walk up the prototype chain.

@sarink 2014-05-30 16:26:37

A nice way to think of it is...

prototype is used by constructor() functions. It should've really been called something like, "prototypeToInstall", since that's what it is.

and __proto__ is that "installed prototype" on an object (that was created/installed upon the object from said constructor() function)

@yoel halb 2015-02-02 01:05:51

I upvoted it, but maybe the downvote reason was because the statement "prototype is used by constructor() functions" might sound as if non constructor functions does not have, which is not the case, however besides that it is not our focus now also one can note that every function is potentially a constructor if called with new...

@Alexander Gonchiy 2015-08-08 04:15:23

Please change "constructor() functions" to "constructor functions", since there might be confusion with "__proto__.constructor() functions". I consider this important, as __proto__.constructor isn't actually invoked when a new keyword is used.

@Yiling 2016-05-02 07:19:27

The statement that "prototype is used by constructor() functions" tells only part of an important fact but told it in a way that likely lead readers to think it is the whole fact. prototype is internally created for upon every function declaration in Javascript, regardless of how that function will be called in the future - with or without the new keyword; prototype of a declared function points to an object literal.

@Beicai 2014-06-25 02:55:18

my understanding is: __proto__ and prototype are all served for the prototype chain technique . the difference is functions named with underscore(like __proto__) are not aim for developers invoked explicitly at all. in other words, they are just for some mechanisms like inherit etc. they are 'back-end'. but functions named without underscore are designed for invoked explicitly, they are 'front-end'.

@demisx 2014-08-25 06:31:45

There are more to __proto__ and prototype, than just the naming convention. They may or may not point to the same object. See @zyklus answer.

@Beicai 2014-10-11 02:08:38

@demisx of course you said is right, but my opinion is name difference exposed the contrast of the functionality.

@ProfNandaa 2015-08-08 10:29:48

It's not just enough to state "as per your understanding", especially when other good answers have been provided before...

@Imp 2012-03-31 21:20:01

prototype is a property of a Function object. It is the prototype of objects constructed by that function.

__proto__ is internal property of an object, pointing to its prototype. Current standards provide an equivalent Object.getPrototypeOf(O) method, though de facto standard __proto__ is quicker.

You can find instanceof relationships by comparing a function's prototype to an object's __proto__ chain, and you can break these relationships by changing prototype.

function Point(x, y) {
    this.x = x;
    this.y = y;

var myPoint = new Point();

// the following are all true
myPoint.__proto__ == Point.prototype
myPoint.__proto__.__proto__ == Object.prototype
myPoint instanceof Point;
myPoint instanceof Object;

Here Point is a constructor function, it builds an object (data structure) procedurally. myPoint is an object constructed by Point() so Point.prototype gets saved to myPoint.__proto__ at that time.

@kzh 2014-08-19 11:50:14

Also if you change the __proto__ property of an object, it changes the object on which prototype lookups are done. For instance, you can add an object of methods as a function's __proto__ to have a sort of callable instance object.

@Francisco 2016-03-21 12:42:49

myPoint.__proto__.constructor.prototype == Point.prototype

@abhisekp 2016-07-01 16:37:56

@kzh lol that gave me funny result console.log( // [Function: call] // TypeError: is not a function. I did obj.__proto__ = Function.__proto__

@kzh 2016-07-01 19:41:33

myFn.__proto__ = {foo: 'bar'}

@ComicScrip 2019-11-26 19:41:48

I think I've got your Point.

Related Questions

Sponsored Content

61 Answered Questions

[SOLVED] How do I include a JavaScript file in another JavaScript file?

53 Answered Questions

86 Answered Questions

[SOLVED] How do JavaScript closures work?

27 Answered Questions

[SOLVED] What does "use strict" do in JavaScript, and what is the reasoning behind it?

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

68 Answered Questions

[SOLVED] How do I correctly clone a JavaScript object?

3 Answered Questions

53 Answered Questions

[SOLVED] How do I test for an empty JavaScript object?

63 Answered Questions

[SOLVED] How can I merge properties of two JavaScript objects dynamically?

39 Answered Questions

[SOLVED] Length of a JavaScript object

Sponsored Content