The prototype in JavaScript is completely parsed, and the prototype is prototype.

The prototype in JavaScript is completely parsed, and the prototype is prototype.

To understand prototype in JS, you must first understand the following concepts:
1. Everything in JS is an object

2. All things in JS are derived from objects, that is, the end point of the prototype chain of all things 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 constructor and instance (object) in JS
The constructor defines prototype to specify the specifications of its instance, and then constructs an instance through new. Their role is to produce objects.
The constructor (method) itself is an instance of the method (Function), so we can also find its _ proto _ (prototype chain)

Object/function F () {} is a constructor. One is provided by the JS native API and the other is customized.
New Object ()/new F () is an instance.
The instance can only "VIEW _ proto _" to know what prototype was created based on,
The prototype of an instance cannot be redefined to create an instance.

Only by observing and thinking on your own can you truly understand the following:

// First, let's see what the constructor is. // 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 be dizzy. Let's break it down.

Prototype
Prototype output format: constructor name prototype
First, let's take a look at what the Object. prototype outputs?
Object {}-> the previous Object is the name of the constructor, and the latter represents the prototype. Here is a {}, that is, an instance of an Object (empty Object)
Then, F {} understands what it means. F is the name of the constructor, and the prototype is also an empty object.

// Let's take a look at the instance var o = new Object () constructed by the constructor; // 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 F prototype to see what will happen?

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

In this way, we can clearly see that I is constructed by F. The prototype is {a: function}, which is the original Null Object prototype. a new a method is added.

In another case, what will happen if the prototype fully covers F?

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

Region ~ Why does it indicate that I is constructed by an Object? No!
Because we completely overwrite the prototype of F, that is, we actually specify the prototype as the object {a: function}, but this will cause the original constructor information to be lost and become the object {: function} specified constructor.
So what is the constructor of the object {a: function?
Because the object {a: function} is actually relative

Var o = {a: function () {}} // a new Object is created.

So the constructor of o is of course an Object.

Let's correct this error.

Function F () {} F. prototype = {a: function () {}} // re-specify 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 ~

Prototype chain

Then let's see what prototype chain is and what?
In short, it is the same as the inheritance relationship (chain) in OOP. It is searched up one layer until the final Object. prototype

The most important thing is to figure out what is (Instance) object in JS. This is simple. Everything in JS is an object!
Make sure that any object has a prototype!

Let's prove that:

Object // This is a Function. A Function is an instance Object of a Function, which is an Object constructed by a Function. _ proto _ = Function. prototype // the prototype of the Object is true // This is a common Object, so it belongs to the instance Function of the Object. prototype. _ proto _ = Object. prototype // true // This is already the top layer of the prototype chain, so the final point is 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. It is still A Function, right! A. _ proto _ = Function. prototype // any Function is A Function instance. So what is the prototype of? Var a = new A (). _ proto _ =. prototype // instance a is constructed by the constructor. Therefore, the prototype of a is defined by the prototype attribute of. prototype. _ proto _ = Object. prototype // example where common objects are objects

Prototype and _ proto __
Each object contains a _ proto __, pointing to the "prototype" of the object ".
Similarly, every function contains a prototype. What is the prototype object?

Let's take a look at the following code and use the constructor to create an object (the above is to create an object in the form of a literal ).

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

Think about it. What will the _ proto _ of the foo object point?

An object that contains the constructor attribute? It doesn't matter if you don't understand it. print out the prototype attribute of function Foo and compare it.

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

Originally, the new object foo _ proto _ only points to the prototype of the function Foo.

foo.__proto__ --> Foo.prototype

What is the significance of JS design? Recall that in the Javascript world, objects are derived from the prototype (another object) instead of the class (MOLD.

When we execute the new operation to create a new object, we will not go deep into the specific implementation of the new operation, but we are certain that _ proto _ of the new object points to a prototype object.

The code just now

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

Who should foo. _ proto _ point? Why can't you point to the Foo function itself? Although the function is also an object, this opportunity will be detailed. But how foo. _ proto _ pointing to Foo is not suitable, because Foo is a function and has a lot of logic code. As an object, it does not make any sense to inherit the logic processing, it inherits the attributes of the "prototype object.

Therefore, each function automatically generates a prototype object, and the _ proto _ of the new object of this function points to the prototype of this function.

foo.__proto__ --> Foo.prototype

Summary
After talking so much, I still don't feel completely clear. It's better to look at the previous figure. I used to refer to other netizens' pictures, but I always thought I was not clear about them. So I drew a picture myself. If you think I'm good, please give me a thumbs up! (I just painted it out after I spent a lot of effort ).

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

1. Each object has a _ proto _ attribute.

In the JS world, there is no concept of a class (MOLD). An object is derived from another object (prototype). Therefore, each object has a _ proto _ attribute pointing to its prototype object. (Refer to the object obj defined in the literal form in the upper left corner. It opens up a space in the memory to store the attributes of the object, at the same time, a _ proto _ is generated pointing to its prototype-the top-level prototype object .)

2. Each function has a prototype attribute.

Why is a "Constructor" called a constructor because it needs to construct an object. Based on the first fact above, the _ proto _ attribute of the new object is directed to whom? It cannot always point to the constructor itself. Although it is also an object, you do not want the new object to inherit the attributes and methods of the function. Therefore, each constructor has a prototype attribute pointing to an object as the prototype of the new object constructed by this constructor.

3. functions are also objects.

Each function has some common attributes and methods, such as apply ()/call. But how are these general methods inherited? How is a function created? Think about it. Everything is an object, including a function and an object constructed by a constructor. Based on the second fact above, each function also points to the prototype of its constructor. The constructor Function is the Function. All functions in JS are constructed by the Function. The general attributes and methods of a Function are stored on the prototype of Function. prototype.