What is a prototype

Let’s start with the definition: a stereotype is a property of the function object that defines the common ancestor of the object produced by the constructor. Objects generated by constructors can be inherited to stereotype properties and methods. Prototypes are objects themselves.

I’m not sure I understand, but let’s look at the code and explain:

Person.prototype.name = 'Ming'
Person.prototype.say = function(){
    console.log('hello')}function Person(){// constructor

}

var person = new Person()/ / instantiate

console.log(person.name)/ / xiao Ming
console.log(person.say())/ / how are you
Copy the code

In the code above, we wrote the constructor Person and put a property name and a method say() on its prototype. Properties on the stereotype can be accessed through its instantiation object.

Does the instantiation object person have a name attribute and a say() method? So let’s just print it out

console.log(person) // Person {} 
console.log(person.name) / / xiao Ming
Copy the code

The instantiated object person is empty, but the name attribute is accessible. Is it a surprise to you

So what happens if I add the property name to the constructor

function Person(){
this.name = "Jun"
}
console.log(person) / / Person {name: "jun"}
console.log(person.name) / / jun
}
Copy the code

So, after looking at the above code and combining the definition, it is easy to realize that a stereotype is a function’s inherent property that defines the common ancestor of the object to be instantiated by all functions. The instantiation object is a separate entity that is only connected to the prototype. If the instantiated object does not have the property or method itself, it will go to its ancestors to find it. You can’t own this property, you can only inherit the properties and methods of your ancestors. If you override an inherited property or method, you own that property or method.

With that, it’s easy to understand the prototype chain.

What is a prototype chain

Let’s start with the definition: add a prototype on top of a prototype, add another prototype… The link of the prototype into a chain, the order of access is also performed in the order of the chain, called the prototype chain

It’s still a little abstract, so let’s put some code in there to explain it

Grand.prototype.lastname = 'li'
 function Grand(){}var grand = new Grand()
//----------------------------------------

 function Father(){
this.fortune = {
    card1:'visa'
}
this.num = 100
 }
 var father = new Father()

//------------------------------------------
 function Son(){
this.hobbit = 'read'
 }
 var son = new Son()
Copy the code

The constructor is Grand, Father, and Son. The Father has a bank card (card1). The total number is 100. Excuse me how to let father and son also and grandpa a surname (logically speaking, direct inheritance on the line, do not need to redefine a), the son how to use father’s bank card?

To solve the above problem, we need to link the three functions together using the prototype chain described above. Let’s modify the above code as follows:

Grand.prototype.lastname = 'li'
 function Grand(){
 this.name = 'tigers'
 }
var grand = new Grand()
//----------------------------------------

Father.prototype = grand// Make dad's prototype point to grandpa
 function Father(){
 this.name = 'little dragon'
this.fortune = {
    card1:'visa'
}
this.num = 100
 }
 var father = new Father()

//------------------------------------------
Son.prototype = father // Make the son's prototype point to the father
 function Son(){
this.hobbit = 'read'

 }
 var son = new Son()
 
  console.log(son.hobbit);/ / reading
  console.log(son.fortune);//{card1: 'visa'}
  console.log(son.lastname)/ / li
  
  console.log(son.name)/ / little dragon
Copy the code

Link the three characters grandpa -> Dad -> son to solve the above problem

But the definition also says that the order of access is executed in chain order, so the output of the son’s name is the father’s name, not the grandfather’s name, because the son’s previous prototype was the father. There you have it.

Let’s talk about prototyping

function Car (color,owner){
     this.weight = 4900
    this.brand = 'BMW'
    this.color = color
    this.owner = owner
}

var car1 =new Car('pink'.'laisf')
var car2 =new Car('green'.'xqm')

Copy the code

The code above defines a Car with attributes of weigh, brand, color, and owner, and then two instantiated objects car1 and car2.

In fact, these two cars are only different in color and name. Other cars, such as weight and brand, are actually the same when they are produced. That is, there is no need to re-execute this. Weight = 4900 this. Brand = ‘BMW’ every time you instantiate an object. The things that really need to be changed, the things that have a bit of personality (color, name), need to be changed manually. So, let’s simplify the code:

Car.prototype ={
    // Put two attributes on the prototype
    weight :4900.brand : 'BMW'
}
function Car (color,owner){
    this.color = color
    this.owner = owner
}
var car1 =new Car('pink'.'laisf')
var car2 =new Car('green'.'xqm')
Copy the code

This can be used to extract common attributes, and the code is not so redundant, which is what senior programmers write. Did you learn?