Writing in the front
When I first learned the inheritance mechanism prototype and prototype chain of JS language, I have been unable to understand this design mechanism, coupled with the original understanding of Java inheritance, in learning the design of JS inheritance mechanism stepped on a big hole, many knowledge points are rote memorization, can not really understand its design idea.
JS inheritance mechanism thought can be said to be a core idea to learn JS, more can be said to be a lifeblood in JS, often these complex, abstract inheritance relations, as well as professional terms, pronouns really become a stumbling block to trouble beginners. When I really understood the idea of its design, it was not that complicated, and it felt very simple.
Before writing this article about JS prototype and prototype chain, I searched a large number of highly praised articles about JS prototype and prototype chain in Google search, most of which are about “what is”, leading to the lack of relevance of some beginners to the design and implementation of JS inheritance, and it is still difficult to accurately understand.
It’s important to understand that the “why” of the designer is much more important than the “how” of the designer.
Today deer to JS inheritance mechanism to do a systematic summary, from the designer’s point of view, the complex design ideas with animation, the fragmentary knowledge point of systematization, to let you understand JS inheritance mechanism thought (prototype and prototype chain).
Mind mapping
1. The history of JS development
To carry out the core design ideas of JS, we should start from the birth of JS.
1.1 Why was JavaScript born?
The more mature browsers were released by Netscape, and in the early years, browsers could only view web content, not user interaction. For example, when we log in and enter the user name and password, the browser cannot judge whether the user has really entered, but the server can judge. If there is no input, an error message will be returned to the user. This design is a waste of time and server resources.
The most popular language at the time was the object-oriented Java programming language, which Netscape named JavaScript in order to spread the browser scripting language through Java. In fact, they have nothing to do with each other.
1.2 Existing problems
JS data type design was affected by the popularity of Java at that time, are object types, at this time encountered a problem, there are objects inevitably involved in the inheritance mechanism, so JS inheritance mechanism should be designed as Java? Or is there something else in mind?
2. JS inherits the design idea
JS developers wonder if designing like Java with the concept of “classes” has become a fully object-oriented programming language like Java. In the end, I decided to design an inheritance mechanism of my own, but it still adopted some features of Java.
2.1 Generating Objects
In general, Java generates objects by creating an instance object from a class, using a new method. But there are no classes in JS, so what should JS designers do?
new
new
new
3. Why prototype objects?
One of the fatal drawbacks of such prototypes is the inability to share common attributes.
Because we know that for every new object, the generated instance is two different objects. So shared properties are not shared. If we change the type property of one object, the other one doesn’t change because it’s not shared.
A prototype object
4. What is a prototype object?
To make sure that all instances of the constructor can share properties, we add a property called prototype to the constructor that points to the prototype. We place all properties and methods shared by the constructor’s Prototype property on the prototype. Properties and methods that do not need to be shared are placed in constructors.
A little bit of a puzzle here is, do we know that objects can have properties, functions can have properties? For beginners is more meng force, then we can say a little simple:
Functions in JavaScript have all the power of objects and can therefore be treated as any other type of object. When we say that functions are first class objects, we mean that functions can also perform some of the functions of objects, such as adding attributes, passing functions as arguments, etc.
So, once the instance object is created through the constructor, it is automatically assigned the properties or methods that are shared on the prototype object. To be clear, the object properties refer to the property values of the prototype object.
5, objects and functions in the prototype chain relationship?
The figure reflects the relationship between the object and the function in the prototype chain, if you think this picture above to see meng force, it doesn’t matter, I just started learning prototype chain, don’t know what is this above painting “qingming festival”, the fawn below by split on step by step, look at this picture is very simple, that’s right, is very simple.
At the beginning of this article we explained what a prototype object is, which is essentially a prototype property of the constructor that points to the prototype object.
We didn’t cover some of the link properties, just the Prototype property, but the rest of the properties are completed with the following image, which we just need to print into our brain.
Let’s examine the figure above. First we declare a constructor for the dog, defining its name and weight attributes (private attributes), and each constructor, as we mentioned earlier, has a Prototype attribute.
This prototype object points to the prototype object, and the prototype object places the shared properties of the object. Note, however, that the prototype object has a constructor property, which in turn refers back to the constructor.
In JS all objects, as long as it is an object, there will be a built-in attribute called _proto_, and this attribute is automatically generated by the system, as long as you create an object, the object has this attribute. The _proto_ attribute points to the prototype object.
From the distribution explanation above, we understand the relationship between constructors and object instances and prototype objects.
It can be summarized as follows:
The constructor’s prototype object points to the prototype object, which has a constructor property that points back to the constructor, and each constructor generated instance object has a Proto property that points to the prototype object.
Yes, the prototype is that simple. But you’ll notice that a prototype is also an object, and you say that any object will have a _proto_ property that points to the prototype object of its own constructor.
That’s right, so to know who the _proto_ property of the prototype object points to, you need to know which constructor created the prototype object?
We know that all JS objects inherit an Object called Object. The Object constructor creates this Object, and their relationship is the same as above.
The Object constructor must also have a _proto_ property. Why does it point to null?
The _proto_ attribute points to a prototype object that has its own constructor. Who is its own constructor? Object constructor, so who is the Object constructor prototype? Itself, of course (see figure), so _proto_ points to null.
If the above relationship is not carefully sorted out, it is indeed very messy, especially for beginners, but if the deer has been sorted out, and then the messy relationship to arrange it in good order, no understanding, read a few articles.
6. Prototype chain
We still have a problem with the prototype chain, right? Now that we know what a prototype is, what is a prototype chain? As the name implies, it must be a chain, and since every object has a _proto_ attribute pointing to the prototype object, the prototype object also has a prototype object pointing to the prototype object until it points to NULL in the figure above, which does not reach the top of the prototype chain.
Remember, we don’t understand that picture yet, we understand it from the top down.
Object
function
Function
function
Function
Function
function
Who makes the Function? Function has a _proto_ attribute that points to its own prototype object. You can think of it this way.
summary
So here we’re looking at the whole picture and summarizing a few definitions and you can look at the picture.
All instances of _proto_ refer to the constructor’s prototype object.
All functions (including constructors) are instances of Function, so the _proto_ of all functions refers to the prototype object of Function.
All prototype objects (including Function prototype objects) are instances of Object, so _proto_ refers to prototype objects of Object (constructors). The _proto_ of the Object constructor points to NULL.
The Function constructor is itself an instance of Function, so _proto_ refers to the prototype object of Function.
The essence of the whole article is in the final conclusion part, in front of all of the decomposition on object in order to make you understand the function and the relationship between the prototype object, this relationship is fixed, who to who, are writing die well, as long as you remember that the relationship between them, this picture is understanding about, can understand this picture, You have a solid understanding of your prototype and prototype chain, but need to do some interview questions to solidify it.
Later, there will be a special article on how to solve the prototype and prototype chain interview questions in the big factory.
This is the end of today’s article, today’s content looks much, in fact, summed up in a few words, or the same sentence, the original is not easy, a thumb-up is the biggest support for the original author, thank you very much.
❤️ Don’t forget to leave your learning footprints[Likes + Favorites + comments]
After reading the article, why not give it a thumbs up? Hee hee, that shows you are very selfish, you are afraid of so good articles let others also see. Just a little joke.
In fact, I am also very selfish, I have always insisted on the original public account: “Deer animation learning programming” secretly to you, which gathered deer in the form of animation to explain data structure and algorithms, network principles, Web and other technical articles.
The author Info:
【 author 】 : Deer
[Original public account] Deer animation learning programming
[Introduction] : I learned programming from the ground up with Lu through animation, and presented the Web front-end field, data structure and algorithm, network principle and other easy-to-understand to my friends. Public reply “information” to send a from zero self-study information package!
[reproduced description] : reproduced please explain the source, thank you for your cooperation! ~