introduction
A friend asked me to tell her about the prototype chain last week. I thought it was a piece of cake, but after some explanation, I realized that what I was familiar with was just a small part of the prototype chain. When it comes to Function and Object and built-in constructors, it's a bit far-fetched. So I plan to write a series of content about this part of the prototype chain. Then write it. Where do I start? Speaking of the prototype chain, what I think about is why there is a prototype chain, what is a prototype chain, and what we can do with the prototype chain. So the content of this series will also be written in this order.
Why is there a prototype chain: Please move to the history of object-oriented programming in JS object-oriented principle .
This chapter describes what is a prototype chain.
JS object
In order to explain all this clearly, I will start with the subject.
The data types in JS are divided into two categories, one is the basic types: String, Number, Boolean, Symbol, null, undefined, and the other is the reference type: Object, Array, Function. There is a saying in JS called "everything is an object". You can understand an object as a data structure like a map, or as a hash table. In short, the data in the object is stored in the form of key: value.
The three elements of the object: unique sign, status, and behavior. The
famous philosophical problem "The Ship of Theseus" is a paradox about the change of identity: If the wood on the ship of Theseus is gradually replaced, until all the wood is not the original Of wood, is this ship still the original ship? So the only sign of the object works. The only sign of the object in JS is the memory address. Objects must have state, state can be changed, and change is behavior. The three elements of the object are established.
Functions are actually objects. Are basic types also objects?
Analysis from the above figure:
1. There are two ways to define String data, using the built-in JS constructor Stringor using literals to define.
2. If the constructor is defined is generated a String object typeof a===object. You can call the lengthmethod stored in the object , or call the method in the prototype object stored in its __proto__ toUpperCase().
3. If a literal definition is used, a primitive value (PrimitiveValue) is generated typeof b===string. No method is defined in the original value. But lengthmethods and toUpperCasemethods can still be used , why?
This is because although the basic data type is not an object, it is stored in the stack in the form of storage, but under certain conditions (new keyword or when the basic data type method is called) the JavaScript engine will automatically convert the value of the original type into a package Object instance (except undefine and null), and destroy the instance immediately after use. This is the primitive type of "wrapping object". In the previous section'What does new syntactic sugar do for us ', we mentioned the knowledge about the packaged object.
JS prototype object
We now know what an object is, so what is a prototype object? In the history of object-oriented programming of JS object-oriented principle , I summarized a sentence: prototype objects are designed to store the public properties and methods of the class. The prototype of custom constructors comes with a non-enumerable constructor attribute pointing to the function. Apart from itself, it is no different from other empty objects, and all built-in constructor prototypes also define instance methods, such as Array.prototype.sort(). You can understand the prototype object as a shared repository. Of course, if you think this sentence is still very abstract, let me give you a chestnut.
In nature, everything is an object. Then we use "objects" to represent everything. Everything is divided into animals and plants, which is called classification. Animals are divided into humans, fishes... This is a more detailed classification. There are 2 people in humans, one is called CSS and the other is called CHH. They are two identical people, commonly known as twins. One day CSS accidentally fell on the road and broke a big caterpillar and broke his foot, but CHH was unharmed, because although the two of them looked exactly the same, they were two independent objects, and they were not affected by each other. So what does this have to do with prototype objects? Now suppose there are two fishes, one is called CSS and the other is called CHH. These two fish are also twins. So how do I distinguish whether this CSS is a fish or a human? In fact, we only need to extract the common features of fish and humans separately and put them in an object to describe (in fact, this is indeed what we do). In this way, we only need to see what kind of characteristics the CSS conforms to to know whether it is a fish or a human. Then the object used to store the common characteristics is called the prototype object.
In other words, there are some objects called prototypes in JS
typeof Object.prototype==='object'//true
The prototype of Object is Object.prototype, which stores the public properties and methods of Object "class".
The prototype of Function is Function.prototype, which stores the public properties and methods of Function'class', and
the prototype of Person is Person.prototype, which stores the public properties and methods of Person'class'
...
The entanglement between Function, the father of JS constructor and Object, the father of objects
We know that JavaScript is an object-based language. In JavaScript, by default, all reference types inherit from Object (implemented through the prototype chain), and the default prototype of any function is an instance of Object. The father of all constructors is Function. The nine native (or built-in) object constructors included in JS are all instances of Function.
See the two lines pointed by the red arrow. Function is a function type. Why is Object also a function type? In fact, this is not difficult to understand, after all, Object is actually a constructor f Object(){[navtie code]}. In fact, Object is set as a function because Object needs to create more instances:
Then someone will ask again: 
Look at this Function instanceof Object, does Object instanceof Functionit literally mean that these two are instances of each other?
Let me answer this question first: Object is indeed an instance of Function, but it is actually a constructor. But Function is not an instance of Object, but the prototype of Function is an Object instance. Function, as the father of a constructor, instantiates itself. As the father of an object, Object constructs all objects, including prototypes. And instanceofthe determination is based on: Examples of long chain prototype prototype included a constructor is instanceofthe constructor returns true.
LOOK THIS PICTURE:
a is the class we created, called class a, in fact it is a constructor, so typeof a==='function'. b is an instance of class a. In fact, it is an object. Combined with the mechanism of new, it can be thought that Function is a factory that gives JS the ability to run, and Object provides raw materials (containers) for the production line.
The last sentence summarizes.
Both Object and Function are the base classes of JavaScript. All constructors in JavaScript require Function to be instantiated, including Object. The prototype of all constructors in JavaScript needs Object to be instantiated.
JS prototype chain
Prototype is almost done. What is the prototype chain? ECMA-262 defines the prototype chain as the main inheritance method of ECMAScript. The basic idea is to inherit properties and methods of multiple reference types through prototypes. In more general terms, the prototype chain is the chain that links the prototypes together.
Three rules of the prototype chain
1.
The prototype of the constructor points to its prototype object . 2. The constructor of the prototype object points to the constructor itself
. 3. The __proto__ of the instance object points to the prototype object of the
constructor. That is to say, there is no between the constructor and the instance. Direct contact. The direct connection with the instance is the instance object of the constructor.
According to the three rules of the prototype chain, we got the basic structure diagram of the prototype chain.
What if the prototype is an instance of another constructor? That means that the prototype itself has a __proto__ pointing to another prototype, and accordingly, another prototype also has a constructor pointing to another constructor. In this way, a prototype chain is constructed between the instance and the prototype. This is the basic idea of the prototype chain. Follow the green line to search for instance attributes.
Prototype search mechanisms : the presence of the prototype chain to expand the search mechanism prototype, when accessing a property of an object instance, if the property exists, it returns the value of the property, otherwise, will automatically find the object __ proto __ Whether the attribute exists in the pointed prototype object. If it exists, return the value of the property, otherwise, continue to look for the prototype object pointed to by __proto__ of the prototype object. Keep checking in this way until the prototype object of Object is found . If this property is not found, undefined is returned .
In fact, the prototype chain should be almost here, plus the two top-level constructors of JS should be complete. Combining the description of the relationship between Function and Object in the previous paragraph and the three major rules of the prototype chain, the prototype chain diagram of Function and Object is obtained:
1. Function instantiates itself, so Function is its own instance, and the __proto__ of this instance points to itself The prototype object.
2. Object instantiates its own prototype object, so Object.prototype is an instance of Object, but Object.prototype does not point to itself because if it points to its own prototype chain, there will be no end, and the search for the prototype chain will continue in Object.prototype It goes in circles, so JS sets the __proto__ of Object's prototype object to null to mark the end of the prototype chain.
3. The prototype object of Function is an instance of Object, so Function.prototype.__proto points to Object.prototype.
Finally, Zhang Family Portrait—the complete prototype chain diagram:
- The next chapter explains what you can do with the prototype chain and how to do it.