Article directory
Primer
Interestingly, JavaScript's object-oriented design ideas are different from those of other object-oriented languages (such as Java, python).
Although JavaScript is an object-oriented language, JavaScript does not use classes, does not create classes, and does not create objects through classes. Fortunately, this situation changed after the appearance of Es6 (it seems that the official also felt that the original JavaScript design was a bit tasteless). Before Es6, we had to use the prototype chain to solve a series of object-oriented problems in JavaScript: object uniqueness, abstraction, inheritance, and polymorphism. The biggest role of the prototype chain is to solve the problem of object inheritance.
In JavaScript, everything is an object. The constructor (Function) is an object, and the prototype object (Function.prototype) of the constructor is also an object. The object has the attribute __proto__, and __proto__ points to the prototype object of the constructor that constructs the object, and the constructor will have the attribute prototype, which points to own prototype object. A prototype object has an attribute constructor, which points to the constructor associated with the prototype object, that is, constructor.prototype.constructor==constructor. It should be noted that __proto__ is an attribute that all objects have, and prototype is an attribute that only functions, or constructors, have, and constructor is an attribute that only prototype objects have.
And what is a constructor and what is a prototype object, let's talk about it one by one in order to explain how Es6 implemented inheritance before.
Constructor
Unlike other object-oriented languages, JavaScript does not use a new class to generate an object, but a new function to generate an object. The new function is called a constructor, and the generated object is called a constructor. instance object.
It should be noted that when a function is used as a constructor, the this pointer in it neither points to window nor undefined, but points to the created instance object.
As in the following example, Person is the constructor of atuo, where atuo is an instance object of Person
function Person(name){
this.name = name
}
var atuo = new Person("atuo")
prototype object
In the constructor, there is a prototype attribute, which points to the prototype object of the constructor, that is to say, the so-called prototype object is the prototype object, and the instance objects generated by the constructor will point to the constructor through __proto__ prototype object.
Since all instance objects will share the same prototype object of the constructor, it is generally placed in the prototype object to place a fixed and unchanging attribute value, so that all instance objects inherit from it. This attribute is also called a reference attribute, so you can put The prototype object is understood as the shared variables and methods of the instance object; the attribute values of different instance objects that can be dynamically changed according to their own needs are placed in the constructor, and this attribute is called a local attribute. When an instance searches for a certain attribute, when its local attribute cannot be found, it will search for the reference attribute, that is, to search for the prototype object of the constructor that constructs the instance. For this aspect, you can poke the design idea of Javascript inheritance mechanism .
function Person(name){
this.name = name
}
Person.prototype.age = 21
var atuo = new Person("atuo")
console.log(atuo.age)
If the atuo instance above has a local attribute name and a reference attribute age, when looking for age, if it cannot be found in the attributes of its constructor (that is, it cannot be found in the local attributes), it will be traced back to the prototype object of its constructor Find it in Person.prototype.
The relationship between constructors, prototype objects, and instance objects is shown in the figure
prototype chain
Synthesize the relationship between the above-mentioned constructor, prototype object, and instance object. So what if we make the prototype object of one constructor equal to the instance of another constructor? Obviously, the prototype object at this time will contain a pointer __proto__ pointing to the prototype object of another constructor. Correspondingly, the chain between prototype objects is formed by such a progressive progression. The chain of prototype objects is progressive along the chain of __proto__. This is the basic concept of the so-called prototype chain.
Take the following code as an example to describe the prototype chain.
function Student(name){
this.name = name
}
Student.prototype.hello = function(){
alert('Hello, ' + this.name + '!');
};
var xiaoming = new Student("xiaoming")
var xiaohong = new Student("xiaohong")
As shown in the figure below, the line marked in yellow is the prototype chain.
inherit
Above we briefly described the relevant concepts of the prototype chain. Next, we use the prototype chain to implement inheritance of two 'classes'. If we have a Parent and a Child constructor, they have nothing to do with each other. As shown in the figure, their prototype chains are not overlapping
Write code so that Child inherits from Parent so that the prototype chains of the two overlap.
function extend(Child, Parent) {
var F = function(){
};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;
Child.uber = Parent.prototype;
}
