__proto__ VS. prototype in JavaScript

Question

This figure again shows that every object has a prototype. Constructor function Foo also has its own __proto__ which is Function.prototype, a

Answer 1

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.

References:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

2. http://www.w3schools.com/js/js_object_prototypes.asp

3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto

Answer 2

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){
    this.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.

Answer 3

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

---

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.

Answer 4

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

Answer 5

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

proof:

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

Answer 6

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

Try this code to understand