setting values to __proto__` and `prototype in javascript [duplicate]

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

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"