The author recently learned about the prototype, and found that there are many knowledge points in the prototype, so I made a little summary, hoping to have a preliminary understanding of the prototype.

The prototype

Definition of prototype

Definition: a property of the function object that defines the common ancestor of the object created by the constructor. Objects generated by this constructor can inherit the properties and methods of the stereotype. Stereotypes are also objects (with a constructor property that returns the parent).

Let’s start with a very general function

function Person() {}console.log(Person)
Copy the code

In Google V8, this is how it’s interpreted

Obviously, Person() is empty, so let’s run the following code

function Person() {}console.log(Person.prototype)
Copy the code

The results of

We can see that the output is an object called constructor. This shows that prototype is a property inherent in the function and is not null

constructorIt has the father in itPerson()And there areprototypeProperties,prototypeThere’s another one in thereconstructorObject. Don’t get confused, forget about the other properties and the nesting. It turns out that almost all objects have a special built-in propertyPrototypeAnd the value is not empty (specialprototypeIt points to another object, which in turn points to its parent.

To go back to seeDefinition of prototype: of the function objectAn attributeDefines the common ancestor of the object created by the constructor. This property refers toprototype 。

Conclusion:

• Person. The prototype, the prototype
• Functions are defined with prototype properties

The use of prototypes

What happens when you add attributes and methods to a stereotype

Experiment 1:

function Person() {}
Person.prototype.name = 'the old fish'
Person.prototype.say = function () {
  console.log('Eat shrimps');
}
var person = new Person()
console.log(person.name);/ / an old fish
person.say() / / to eat shrimp
Copy the code

Here we know that objects generated by this constructor can inherit the properties and methods of the stereotype.

Experiment 2:

function Person() {
  this.name = 'wang'
}
Person.prototype.name = 'the old fish'
Person.prototype.say = function () {
  console.log('Eat shrimps');
}
var person = new Person()
console.log(person.name); / / wang
person.say() / / to eat shrimp
Copy the code

As you can see here, the property in the constructor is printed if there is a corresponding property in the constructor. But a relative question arises: Have the properties of the stereotype been changed?

Experiment 2 Extension:

function Person() {
  this.name = 'wang'
}
Person.prototype.name = 'the old fish'
Person.prototype.say = function () {
  console.log('Eat shrimps');
}
var person = new Person()
console.log(person)
Copy the code

Google V8 engine in action

As you can see, the properties in the stereotype have not changed, and instances cannot directly modify the properties on the stereotype.

Conclusion:

• An instance object has explicit properties from the constructor, and implicit properties from the prototype constructor
• An instance cannot directly modify properties on a stereotype

Using the characteristics and concepts of the stereotype, common attributes can be extracted

If we need to write a constructor, it is often the case that part of the property value is fixed and part can be customized, as shown in the figure below

function Car(color, owner) {
  this.height = 1000
  this.leng = 4900
  this.carName = 'BMW'
  this.color = color
  this.owner = owner
}
Copy the code

The first three properties are fixed, and the last two need to be assigned when the object is created, so the first three lines of code are called repeatedly each time the object is executed. If we use the prototype, we can optimize well. The following figure

Car.prototype = {
  height: 1000.lang: 4900.carName: 'BMW'
}
function Car(color, owner) {
  // this.height = 1000
  // this.lang = 4900
  // this.carName = 'BMW'
  this.color = color
  this.owner = owner
}
var car = new Car('yellow'.'haonan')
var car1 = new Car('pink'.'huihui')
console.log(car.carName); //BMW
console.log(car1); //{ color: 'pink', owner: 'huihui' }
Copy the code

We can see that we can still print the value of car.carname without having to call the first three lines of code every time we call the constructor. However, print car1 can only display color and owner, indicating that the implicit properties will not be displayed unless called.

Deletion and modification of prototypes

case

function Person() {}
Person.prototype.lastName = 'the old fish'
var person = new Person()
console.log(person.lastName) / / an old fish
Person.prototype.lastName = 'there' / / modify
console.log(person.lastName)/ / shrimp
delete Person.prototype.lastName  / / delete
console.log(person.lastName) // undefined
Copy the code

Note: instance cannot be directly modify, or delete the prototype attribute, namely, modify, or delete must bring a prototype, not as a Person. The lastName = ‘shrimp’ type, must write a Person in the circumstances. The prototype. The lastName = ‘ ‘dried shrimp.

Note: this article is a blogger learning JS knowledge, there are mistakes are inevitable, and there are many points of knowledge did not explain clear, welcome big guy correction, I will regularly update the new article and modify the previous mistakes, welcome to the comment area together to discuss learning ~