__Proto__ Vs. Prototype in Javascript

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

__proto__ is an internal property of an object, pointing to its prototype. Current standards provide an equivalent Object.getPrototypeOf(obj) method, though the 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.

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: instanceOf.call(object, Class) which return true if object is instance of Class.

To explain let us create a function

 function a (name) {
  this.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 a.prototype.car = "BMW" and do b.car, 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".

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)

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.

Example:

function Foo () {
    this.name = '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 ' + this.name;
}

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

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

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

function Person(name){
    this.name = name
 }; 

var eve = new Person("Eve");

eve.__proto__ == Person.prototype //true

eve.prototype  //undefined

Instances have __proto__, classes have prototype.

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.

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.