This article describes the understanding of JavaScript prototype and prototype chain. Share it for your reference, as follows:
Everything in javascript is an object, but since there is no concept of Class class, it cannot express the relationship between objects well.
For example, between object A and object B, they are relatively independent individuals and do not interfere with each other. Object A modifys its own properties and will not affect object B.
Although this is good, there is a problem. If object A and object B have a method run() , and the code is the same, then object A and object B each have a complete code of the run() method, which requires resources to be saved.
Once there are too many objects applied in our program, this resource consumption will be huge. So is there a way to have some common properties and methods between object A and object B, so that they have some connection before?
Let's imagine whether there will be a common object (public object). Common object holds common properties and methods, and there is a prototype attribute in object A and object B pointing to this common object.
Of course, when we call the properties and methods of object A or object B, if we are not found in our own object, we will look for the object pointed to by the prototype property.
The common object itself also has a prototype attribute pointing to a higher-level common object, and then searches up until it is null and stops.
This path that keeps looking from bottom to top is like a chain. We call it the prototype chain, and that common object, we call it the prototype object.
Let's look at a constructor
function Base(name) {
= name;
}
let A = new Base('A');
let B = new Base('B');
//Each function has a prototype attribute pointing to the prototype object of the function();
//Of course the prototype object is also an object, it also has a constructor pointing to the constructor( === Base);
//The constructor of each instance object points to the constructor that created them( === Base);
( === Base);
//Each instance object has a __proto__ attribute, which points to the prototype object of the constructor(A.__proto__ === );
(B.__proto__ === );
1. Each function has a prototype attribute, which points to the prototype object of the function.
2. The prototype object is also an object. It also has its own constructor, which points to the constructor Base(). In other words, the prototype object is actually an instance of the constructor Base(). It's just a special one, used to store public attributes and methods.
3. Each instance object created through the constructor Base() has a constructor pointing to the constructor that created them.
4. Each object has a __proto__ attribute that points to the prototype object of the constructor Base(). In other words, __proto__ is the key to connecting prototypes into a chain. Otherwise, both object A and object B will not be able to find the public properties and methods on the prototype object.
function Base(name) {
= name;
}
//We add public attributes to the prototype object = 'start';
//We add public methods on the prototype object = function() {
( + ' run ...');
};
let A = new Base('A');
let B = new Base('B');
();
();
();
();
//Modify the properties on the prototype, and the instance object will also change. = 'stop';
();
();
Through prototypes and prototype chains, an association between objects is made.
So how can one constructor inherit from another constructor through prototype and prototype chain?
For example, if we want the constructor Child to inherit from the constructor Base, we only need to let Child's prototype point to the Base's prototype object, isn't that enough?
function Base(name) {
}
= 'Base';
= function () {
( + ' run ...');
};
function Child() {
}
= ;
//Note that at this time, the constructor property of the object points to Base//This causes the instance object created by the constructor function Child, the constructor property of the object will point to Base, not Child, which will cause confusion.//So we reset the point to Child = Child;
let c = new Child();
();
();
There is a problem with this. Any modifications to point to the same prototype object will be reflected on it.
At this time, pointing to Child, which is obviously a problem.
We can only use an empty constructor in the middle to complete the prototype's pointing.
function Base(name) {
}
= 'Base';
= function () {
( + ' run ...');
};
function Child() {
}
//Create an empty constructor in the middlefunction Mid() {
}
//Let the prototype of the empty constructor point to the Base's prototype object = ;
//Let Child's prototype point to an instance of the empty constructor = new Mid();
//In this way, when modified, it will not be affected = Child;
let c = new Child();
();
();
//'s constructor still points to Base and is not affected();
So how can you inherit one object from another through prototype and prototype chain?
For example, if we want object B to inherit from object A, we just want to get the properties and methods of object A. If we think about it this way, then by pointing object B's __proto__ to object A, wouldn't it be possible?
let A = {
name: 'A',
run() {
( + ' run ...');
}
};
();
();
let B = {};
//Let object B's __proto__ point to object AB.__proto__ = A;
// When object B calls the run() method, it will look for it on itself. If it is not found, it will look for it through __proto__ upward// Since __proto__ points to object A, the run() method will eventually be found in object A.();
B.__proto__.name = 'B';
();
();
There is a problem with this, when modifying B.__proto__.name = 'B';, object A is also affected.
We can solve this problem through () provided by ES5, which can create a new object through the specified prototype object.
let A = {
name: 'A',
run() {
( + ' run ...');
}
};
();
();
let B = {};
//Create a new object with object A as the prototype object through()//Let object B's __proto__ point to the new object//This way, the properties in B.__proto__ are not related to object A.B.__proto__ = (A);
();
B.__proto__.name = 'B';
();
();
Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.
For more information about JavaScript, readers who are interested in reading this site's special topic:JavaScript object-oriented tutorial》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《Summary of JavaScript traversal algorithm and skills"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.