This is the 24th day of my participation in the August More Text Challenge

preface

Prototype is a particularly important concept in JS, today we are going to talk about in-depth understanding of prototype and prototype chain

The prototype

concept

A stereotype is a property of the function object that defines the common ancestor of the object that the constructor constructs. Objects generated through this constructor can inherit properties and methods from the stereotype. Prototypes are also objects.

How to understand this sentence?

understand

We know that constructors are used to produce objects such as:


// Define the constructor
function Person() {}
// Generate objects
var tom = new Person();
Copy the code

The constructor has a property called prototype, which is the common ancestor of the object constructed by the constructor. Objects produced by the constructor can use the properties and methods of the prototype. Such as:

// Define the constructor
function Person() {}
// Attributes and methods on the Person.prototype can be used by future generations
Person.prototype.job = "teacher";
Person.prototype.school = "1";
Person.prototype.skill= function (s){
    console.log("I have a skill:" + s);
}
// Generate objects
var tom = new Person();
var alice = new Person();
console.log(tom.job);
console.log(alice.job);
Copy the code

Here, we take a closer look at the prototype. We know that objects can inherit properties and methods from stereotypes, but why can objects find corresponding stereotypes? There must have been some kind of special relationship or connection, right? What happens when objects are generated to cause this

In fact, to solve the mystery, go back to the moment when the new keyword generated the object. We know that new generates objects, and its internal mechanism is as follows:

  • Implicitly generate this object
  • To perform this. = XXX XXX
  • return this

This refers to the generated object. In the first step, the implicitly generated this object is not an empty object {}. It actually starts with something inside it. It has a property called __proto__, whose default value is the prototype of the constructor that constructed the object.

function Person() {}
var tom = new Person();
// New generates Tom
//this = {
// __proto__ : Person.prototype;
/ /}
/ / so
console.log(tom.__proto__ === Person.prototype);//true
Copy the code

tom.__proto__ === Person.prototype

Now the truth is out.

When looking for an object’s attribute, it will find itself first, and if it has none, it will follow the __proto__ point to its ancestor.

An object that wants to find its own prototype can do so with the __proto__ attribute.

If an object is looking for its own constructor, it also has a property called constructor to view the object’s constructor. That is:

tom.constructor === Person; //trueCopy the code

The characteristics and concepts of prototypes can be used to extract common attributes of objects

For example, when the student’s quality score and total score are calculated into the prototype, each object is generated with these two attributes:

var rootElement = document.getElementById('table_id');
/ / the constructor
function Student(name, gender, score) {
    this.name = name;
    this.gender = gender;
    this.score = score;
    this.mount();
}
// Stereotypes have attributes and methods
Student.prototype.qulity = 100;
Student.prototype.sumScore = function () {
    return this.score + this.qulity;
}
// Mount the data to the page
Student.prototype.mount = function () {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + this.name + '<td>' +
        '<td>' + this.gender + '<td>' +
        '<td>' + this.score + '<td>' +
        '<td>' + this.qulity + '<td>' +
        '<td>' + this.sumScore() + '<td>';
    rootElement.appendChild(tr);
}
var alice = new Student('alice'.'woman'.20);
var tom = new Student('tom'.'male'.22);
Copy the code

Add, delete, change and check on the prototype

This is a little bit easier to understand, so let’s just write it down:

4. By a prototype; Student.prototype.qulity = 100;

Delete: through the prototype; For example: delete student.prototype.quity;

4. To adopt a prototype; Student.prototype. Qulity = 80;

Query: objects generated by stereotypes or corresponding constructors; For example; Student. The prototype. The qulity or Tom. Qulity;

Note: Descendants can view the prototype and cannot change it. (Non-absolute, reference values can be used)

Prototype chain

To explore the

Let’s dive into the prototype and see what we have,

Start by creating an empty constructor

function Person() {}
Copy the code

And then look at his prototype

We’ll find that the prototype object contains two familiar things: constructor and __proto__

Let’s do a more complicated one

function Student(name, gender, score) {
    this.name = name;
    this.gender = gender;
    this.score = score;
}

Student.prototype.qulity = 100;
Student.prototype.sumScore = function () {
    return this.score + this.qulity;
}
Copy the code

Through observation

The prototype object contains three parts:

  • What we define on the prototype
  • constructor
  • __proto__

doubt

There are a couple of questions to be determined

  1. What is the constructor itself
  2. Student: The prototype refers to the Object
  3. Are there any prototypes in Object.protoype? Is this the end of the prototype chain? Will all objects inherit Object. Prototype?

Answer questions

Let’s solve the first problem first

We verify that the constructor of the prototype object is correct:

You have a property pointing to me and I have a property pointing to you.

Let’s look at the second question

Student: The prototype refers to the Object. Try in baiThe constructor’s prototype refers not to Object, but to the prototype of Object: Object.prototype

There are prototypes like this, and they form a chain of __proto__, which we call a prototype chain

Let’s look at the last question

Are there any prototypes in Object.protoype? Is this the end of the prototype chain? Will all objects inherit Object. Prototype?

Let’s look at that

Object. Protoype is the end of the protoype chain. Will all objects inherit from Object.prototype? The answer is no. Most objects will eventually inherit from Object.Prototype, but there are exceptions. In addition to the literals and the constructor new, there is another way to create an Object: the object.creat () method, which can either pass in an Object or null to indicate the Object’s prototype. When null is passed in, there is no prototype. That is, the Object.creat() method is used to customize the prototype.

So we see that the archetypal chain describes this complex set of inheritance relationships

END

That’s all about prototypes and prototype chains

If you have any questions, please leave a message