preface

Prototype and __proto__ are used in prototype and __proto__ are used in __proto__. What role does it play in the prototype chain? And what role does it play in succession? Why did javascript design these two attributes? And so on a series of problems, online search many information, see is also in the clouds in the fog confused, next, this article is easy to understand to explain the above problems, but also as their own learning notes.

Why prototype and __proto__

Javascript has no concept of classes

If you are familiar with object-oriented programming languages like Java, you are familiar with the concept of classes, in which classes are first designed and then regenerated into instances of classes (instantiated into objects). All data types are objects. There is nothing wrong with that. Not all programming languages have to rely on the concept of classes as Java does. But we have to admit that class is thought to bring a lot of convenience to project engineering problems. If you want to build a large project, you’re going to have to do inheritance, and you’re going to have to do it with classes, but there’s no such thing as a class in javascript, so what do we do? We can mimic classes, so prototype and __proto__ are derived.

You can also refer to Teacher Ruan Yifeng: Javascript inheritance mechanism design ideas

Data types in javascript

Before we look at Prototype and __proto__, let’s look at data types in javascript. The reason for this is that prototype and __proto__ use both Function and Object. Javascript data types fall into two categories:

  • Basic data type: String Number Boolean Null undefined
  • Reference data types: Array Object Date Function RegExp

We can use typeof to determine the data typeof a variable. Five basic data types can be determined by typeof (Null = object), while reference data types can only be determined by object and function. In other words, reference data types can only be determined by object and function. There are actually two types of reference types: Object and Function. The other types are derived from Object.

The code is as follows:

The Function and the Object

Based on the above explanation, we will focus on Function and Object.

Function and Object
  • Function can be executed
  • Function can be used as an Object constructor. For example, when we use the new operator followed by a Function, the Function is treated as a constructor and returns an Object. The code is as follows:

The constructor itself is a function, and the instance returned by the constructor is actually an Object

  • The constructor function has a prototype property, while the instance object has no prototype property. The code is as follows:

Now that Function and Object are clear, let’s look at what role prototype and __proto__ play in inheritance.

What role do prototype and __proto__ play in inheritance

In languages like Java, the concept of inheritance is implemented through classes and between classes, but javascript has no classes at all, it’s all objects, so in javascript, the concept of inheritance is implemented through objects and between objects.

When considering javascript inheritance, the scope is limited to reference data types. Although reference data types are divided into Function and Object, in terms of inheritance, there is no need to distinguish Function and Object, and only need to be treated as objects.

So how does javascript determine inheritance relationships? The answer is proro

__proto__ differs from prototype, which is only found in Function, while __proto__ is found in both Function and Object.

The code is as follows:

To summarize the nature of javascript inheritance: Object A’s __proto__ attribute points to object B, which is the prototype object (or parent object) of A. Object A can use properties and methods in object B, as well as properties and methods in object C, which is the prototype chain of object B

Sample code:

The above code implements javascript inheritance at its simplest, seemingly trivial, and a __proto__ implements the inheritance problem. What’s with Prototype? Prototype uses Function as a constructor. __proto__ is not an official standard attribute, so use the Prototype attribute to mimic class and inter-class inheritance patterns.

I’ll focus on constructing objects with the Function type. When you know what you’re doing with the new operator, you’ll know what Prototype does.

What exactly does the new operation do

From the above analysis, we know that P is the type of object and Parent is the type of Function. In Java, if you write Parent this way, Parent should be a class, but javascript doesn’t have a class, and we want to use this syntax. Take a look at the full code:

This is the classic build constructor, but what does new do?

  • Step 1: Parent is executed. When the new keyword is used, the Parent function is executed under the scope of P, so this is instance P, and the name,age, and hobby properties are created as properties of P.
  • Step 2: Point P. __proto__ to Parent. Prototype. This is the essence of the constructor, so p inherits properties and methods from Parent. The verification is as follows:

In this way, a living example is created.

conclusion

Finally, we concluded with the most vote-winning answer to this question on Stack Overflow, and his explanation was very simple

Here are the answers:

__proto__is the actual object that is used in the lookup chain to resolve methods, etc. prototype is the object that is used to build __proto__when you create an object with new

Translation:

__proto__ is the object that is really used to look up the prototype chain to get the method.

Prototype is the object used to build __proto__ when creating objects with new