JavaScript in the prototype prototype completely parse _ basic knowledge

To understand the prototype in JS, we must first clarify the following concepts
1. All the things in JS are objects

2. All things in JS are derived from object, that is, the end point of all the prototype chain points to Object.prototype

  ["Constructor", "ToString", "tolocalestring", "valueof", "hasOwnProperty", "isprototypeof", 
   //" propertyIsEnumerable "," __definegetter__ "," __lookupgetter__ "," __definesetter__ ",
   //" __lookupsetter__ "]
   Console.log (Object.getownpropertynames (Object.prototype));

3. The subtle relationship between constructors and instances (objects) in JS
The constructor defines the specification of its instance by defining prototype, and then constructs the instance by new, whose function is to produce the object.
The constructor (method) itself is an instance of the method (function), so it can also be traced to its __proto__ (prototype chain)

Object/function F () {} This is the constructor, one is provided by the JS native API, and one is a custom
New Object ()/New F () This is the case.
The instance "can only" view __proto__ to find out what the prototype was built on,
and "Can't" redefine the instance of prototype delusion to create an instance of the instance.

To practice the truth, only by doing a hands-on observation/thinking can truly understand:

  Let's take a look at what the constructor is
  //function Empty () {}  function Empty () {}
  Console.log (Function.prototype, function.__ PROTO__);
  Object {}          function Empty () {}
  Console.log (Object.prototype, object.__proto__);
  function F () {}
  //F {}              function Empty () {}
  Console.log (F.prototype, f.__proto__);

You may have fainted, let's break it down.

Prototype
The format of the prototype output is: The constructor name prototype
First look at what the Object.prototype output?
Object {}-> the previous object is the name of the constructor, and the latter represents the prototype, which is a {}, an instance of an object (empty object)
So f {} We know what it means, F is the name of the constructor, and the prototype is also an empty object

  Then look at the instance constructed by the constructor
  var o = new Object ();//var o = {};
  Undefined       Object {}
  console.log (O.prototype, o.__proto__);
  function f () {}
  var i = new F ();
  Undefined       F {}
  console.log (I.prototype, i.__proto__);

Let's go deeper and define the prototype F to see what happens.

  function F () {}
  F.prototype.a = function () {};
  var i = new F ();
  Undefined       F {a:function}
  console.log (I.prototype, i.__proto__);

So we can see clearly that I was constructed from F, the prototype is {a:function}, and the original null object prototype adds a method

What if we change the situation and completely cover F's prototype?

function F () {}
  F.prototype = {
    a:function () {}
  };
  var i = new F ();
  Undefined       Object {a:function}
  console.log (I.prototype, i.__proto__);
  

Why does this show I was constructed from Object? It's not right!
Because we completely cover the prototype of F, which is to specify the prototype as object {A:function}, this can cause the original constructor information to be lost and become the constructor specified by the object {a:function}.
So what is the constructor of the object {a:function}?
Because the object {a:function} is actually relative to the

  var o = {a:function () {}}//New an Object

So O's constructor of course is Object.

Let's fix this mistake.

  function F () {}
  F.prototype = {
    a:function () {}
  }
  //re-specifying the correct constructor
  f.prototype.constructor = F;
  var i = new F ();
  Undefined       F {a:function, constructor:function}
  console.log (I.prototype, i.__proto__);

Now we can get the correct prototype information again ~

Prototype chain

And see what the prototype chain is?
Simply speaking, the inheritance relationship (chain) in OOP is the same as the one layer up and up until the final Object.prototype

The most important thing is to find out what is in JS (instance) object, this simple, JS all things are objects!
To make it clear that any object has a prototype!

So let's prove it:

  Object//This is a function, which is an instance object of a function, and is the prototype of
  object.__proto__ = = Function.prototype//So object constructed by function, true
  //This is a normal object, so it belongs to an instance
  of object function.prototype.__proto__ = = Object.prototype//True
  //This is already the topmost layer of the prototype chain, so the final point to null
  object.prototype.__ PROTO__ = = NULL//True

  function//This is also a function, right!
  function.__proto__ = = Function.prototype//True function
  
  a () {}//This is a custom function, after all, a function, yes! 
  a.__proto__ = = Function.prototype//All functions are instances of function, so the prototype of a is?
  var a = new A ()
  a.__proto__ = = A.prototype//instance A is constructed by a constructor, so the prototype of a is defined by the prototype attribute of a
  a.prototype.__proto__ = = Object.prototype//Normal objects are examples of object

Prototype and __proto__
Each object contains a __proto__ that points to the "archetype" of the object.
The similar thing is that every function contains a prototype, what does the prototype object do?

Let's look at the code below and use the constructor to create an object (the object is created in literal form).

function Foo () {};
var foo = new Foo ();
Console.log (foo.__proto__);

Just imagine, what does the __proto__ of this Foo object point to?

An object that contains the constructor property? Do not understand that it does not matter, the function of Foo's prototype attributes printed out, compared to know.

function Foo () {};
var foo = new Foo ();
Console.log (foo.__proto__);
Console.log (foo.prototype);
Console.log (foo.__proto__ = = = Foo.prototype);

Originally, the __proto__ of new object Foo only points to the prototype of function Foo.

foo.__proto__--> Foo.prototype

What is the meaning of JS design? Recall the above, in the JS world, the object is not based on the class (stencil) created, but from the prototype (another object) derived from.

When we perform the new operation to create a novel object, we do not delve into the concrete implementation of the new operation, but one thing we are sure of--is to point to a prototype object for the __proto__ of the new object.

Just this piece of code

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

Who the hell is foo.__proto__ pointing to? How can you point to Foo, the function itself, even though the function is also an object, the opportunity to speak in detail. However, it is not appropriate to point to Foo, because Foo is a function, there are many logical code, Foo as an object, inheritance logical processing has no meaning, it is to inherit the "Prototype object" properties.

So, each function automatically generates a prototype object, and the __proto__ of the object that is new from the function points to the prototype of the function.

foo.__proto__--> Foo.prototype

Summarize
said so much, the feeling is still not completely clear, as the last picture. I have consulted other users of the map, but always feel where not to say clearly, so I drew a picture of myself, if I feel good, please point a praise! (Lao Tze was rally to draw).

Let's take this picture and remember the following facts:

1. There is a _proto_ attribute in each object.

There is no Class (stencil) concept in the JS world, objects are derived from another object (prototype), so each object will have a _proto_ attribute pointing to its prototype object. (Refer to the object obj, which is defined in literal form in the upper-left corner, which opens up a space in memory for the object's own properties, while generating a prototype that _proto_ to it-the top-level prototype object.) ）

2. Each function has a prototype property.

Why is a constructor called a constructor because it constructs an object. So according to the first fact, who is the _proto_ attribute of the new object that is constructed? You can't always point to the constructor itself, although it's also an object, but you don't want the new object to inherit the properties and methods of the function. Therefore, each constructor has a prototype attribute that points to an object as a prototype of the new object constructed by the constructor.

3. Functions are also objects.

Each function has some common properties and methods, such as apply ()/call (). But how are these common methods inherited? How does a function create it? Think of everything, including functions as objects, and objects constructed from constructors. Then, according to the second fact, each function also has a _proto_ that points to its constructor prototype. And the function of this constructor is that all functions in FUNCTION,JS are constructed by function. The common properties and methods of a function are stored on the prototype object Function.prototype.