setting values to __proto__` and `prototype in javascript

Question

What is the difference between __proto__ and prototype

I read most of articles in the web and I still cannot understand it.. as far as I understand __proto__ is the property which is for prototype object prototype is the actual object am I correct? ....

Why only functions have prototype property? And how is it be an object?

var fn = function(){};
console.dir(fn);

output

function fn()
  arguments: null
  caller: null
  length: 0
  name: ""
  prototype: Object
  __proto__: ()
  <function scope>

---

Using object and function I try to set values for __proto__
and prototype in chrome console as shown below

//create object and display it
var o = {name : 'ss'};
console.dir(o);

output

Object
      name: "ss",
      __proto__: Object

---

//set the values
o.__proto__ = 'aaa';
o.prototype = 'bbb';

//after set the values display the object
console.dir(o);

output

 Object
      name: "ss",
      prototype: "aaa",
      __proto__: Object

---

//create function and display it
var fn = function(){};
console.dir(fn);

output

function fn()
  arguments: null
  caller: null
  length: 0
  name: ""
  prototype: Object
  __proto__: ()
  <function scope>

---

//set the values
fn.prototype = 'fff';
fn.__proto__ = 'eee';

//after set the values display the object
console.dir(fn);

output

function fn()
  arguments: null
  caller: null
  length: 0
  name: ""
  prototype: "fff"
  __proto__: function()
  <function scope>

Then I realize that I can't set values for __proto__ but can set values to prototype . W why can't I set values for __proto__ ???

Answer 1

In most languages, there are classes and objects. Classes inherit from other classes.

In JavaScript,

The inheritance is prototype-based. That means that there are no classes. Instead, an object inherits from another object.

Inheritance, the __proto__

When an object rabbit inherits from another object animal, in JavaScript that means that there is a special property set rabbit.__proto__ = animal.

When a rabbit's property is accessed, and the interpreter can’t find it in rabbit, it follows the __proto__ link and searches in animal.

var animal = { eats: true }
var rabbit = { jumps: true }
rabbit.__proto__ = animal  // inherit
alert(rabbit.eats) // => true

The prototype property

When calling the constructor function, new operator implicitly sets the __proto__ property of the newly created object to the value of the constructor's prototype property.

var animal = { eats: true }
 function Rabbit(name) {
  this.name = name
}
Rabbit.prototype = animal
var rabbit = new Rabbit('John')
alert( rabbit.eats ) // => true

Complete Reference.

Answer 2

That's pretty simple actually.

1. {object}.__proto__ is a reference to {constructor function}.prototype object.
2. operator new {constructor function} (params) in JavaScript does three major things:
   1. Creates new object, let it be 'obj'.
   2. Calls that {constructor function} with this set to that newborn object (obj).
   3. Sets obj.__proto__ = {constructor function}.prototype;

And that's pretty much it.

That obj.__proto__ establishes single linked list used to lookup for properties not defined in the object itself. As it is set to {constructor function}.prototype object then we can treat that prototype as a "rack" for object methods - functions associated with object instances.

Example:

function Foo() {} 
Foo.prototype.bar = function() { return "foo.bar here"; }

var obj = new Foo(); // creating object with __proto__ set to Foo.prototype;

obj.bar(); // will return "foo.bar here"