read table of contents
阐述
[prototype property]:
In JavaScript, each object has a prototype property, which points to the prototype object of the function.
prototype 属性
In JavaScript, every function has a prototype property, which points to the function's prototype object.
Let's use a diagram to represent the relationship between constructors and instance prototypes:
E.g:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function Person(age) {
this.age = age
}
Person.prototype.name = 'wgchen'
var person1 = new Person()
var person2 = new Person()
console.log(person1.name) //wgchen
console.log(person2.name) //wgchen
</script>
</body>
</html>
In the above example, the prototype of the function points to an object, and this object is the prototype of the instance created when the constructor is called, that is, the prototypes of person1 and person2.
The concept of prototype:
when each javascript object (except null) is created, it will be associated with another object, this object is what we call the prototype, and each object will "inherit" properties from the prototype.
__proto__
This is a property that every object (except null) will have, called __proto__, this property will point to the object's prototype.
function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true
function Person() {
}
var person = new Person();
console.log(person);
Additional instructions:
Most browsers support this non-standard method of accessing the prototype, however it does not exist in Person.prototype, in fact, it comes from Object.prototype.
It is not so much a property as it is a getter/setter. When obj.__proto__ used , it can be understood as a return Object.getPrototypeOf(obj).
constructor
Each prototype has a constructor property that points to the associated constructor.
function Person() {
}
console.log(Person===Person.prototype.constructor) //true
So update the relationship diagram again:
function Person() {
}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
Additional instructions:
function Person() {
}
var person = new Person();
console.log(person.constructor === Person); // true
When obtaining person.constructor, in fact, there is no constructor property in person. When the constructor property cannot be read, it will be read from the prototype of person, which is Person.prototype, which happens to have this property in the prototype, so:
person.constructor === Person.prototype.constructor
实例与原型
When reading the properties of the instance, if it can't find it, it will look for the properties in the prototype associated with the object. If it can't find it, it will find the prototype of the prototype, and it will find the topmost level.
function Person() {
}
Person.prototype.name = 'Kevin';
var person = new Person();
person.name = 'Daisy';
console.log(person.name) // Daisy
delete person.name;
console.log(person.name) // Kevin
In this example, we add the name attribute to the instance object person, and when we print person.name, the result is naturally Daisy.
But when we delete the name attribute of person, read person.name, if the name attribute is not found in the person object, it will be searched from the prototype of person, that is person.__proto__ , Person.prototype. Fortunately, we found the name property, the result is Kevin.
prototype of the prototype
Earlier, we have said that the prototype is also an object. Since it is an object, we can create it in the most primitive way, that is:
var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin
In fact, the prototype object is generated by the Object constructor. Combined with the previous point, the instance __proto__points to the prototype of the constructor, so let's update the relationship diagram:
Prototype chain
Briefly review the relationship between constructors, prototypes, and instances:
each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object.
So what if we make the prototype object equal to an instance of another type?
Obviously, the prototype object at this time will contain a pointer to another prototype, and correspondingly, the other prototype also contains a pointer to another constructor.
If another prototype is an instance of another type, then the above relationship still holds. In this way, a chain of instances and prototypes is formed. This is the basic concept of the so-called prototype chain. ——Excerpted from "JavaScript Advanced Programming"
In fact, to put it simply, it is the process of the above four-five.
Following the above five, what about the prototype of Object.prototype?
console.log(Object.prototype.__proto__ === null) // true
null means "no object", i.e. there should be no value there.
So Object.prototype.__proto__the value of is null and Object.prototype has no prototype, which actually expresses a meaning.
So when looking for properties, you can find Object.prototype to stop the search.
The last relationship diagram can also be updated to:
The chain structure of interconnected prototypes in the diagram is the prototype chain, which is the blue line.