Code explanation of prototype and prototype chain in JavaScript

The content of this article is about the code explanation of prototype and prototype chain in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

For many front-end developers, the prototype and prototype chain in JavaScript are a relatively confusing point, so this article records my understanding of this aspect and will update it with a deeper understanding in the future.

Object

If you want to understand prototypes and prototype chains, you must first understand what an object is? Object Oriented Programming (OOP) is the current mainstream programming paradigm, which abstracts various complex relationships into multiple objects and then divides and cooperates with them to complete the simulation of the real environment. Therefore, an object is an abstraction of a single physical object, and the object obtained by abstraction is a container with properties and methods. For example, if we abstract a student into a student object, then attributes can be used to record which grade the student is (such as the first year of junior high school, the first year of high school, etc.), and methods can be used to represent a certain behavior of the student (such as studying, playing, etc.).

Constructor, instance object and inheritance

When we want to use object-oriented programming, the first task is to generate objects. In JavaScript, the constructor is specifically used to generate instance objects. A constructor can generate multiple instance objects, all of which have the same structure.

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

Special attention should be paid to:

• In the above code, Student is the constructor, but in order to distinguish it from ordinary functions, the first letter of its name must be capitalized.

• The this keyword is used inside the function body, which represents the object instance to be generated.

• When generating objects, you must use the new command. Only new will generate a new instance object.

In addition to using the new command to generate new instance objects, we can also create them through Object.create(). This method is suitable for when we have no way to get the constructor but can only get to an existing object.

var student1 = {
    name:'Solar',
    age:18,
    greeting:function(){
        console.log('Hello!');
    }
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!

In the above code, the Object.create method takes the student1 object as the prototype and generates the student2 object. student2 inherits all properties and methods of student1.

Prototype object (prototype)

First of all, let us understand why there is a prototype object (prototype)?

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.greeting = function(){
    console.log('Hello!');
  }
}

var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');

student1.greeting=== student2.greeting
// false

As you can see from the above code, although the objects instantiated through the constructor have a greeting method, because this method is generated on each instance object of itself, that is, every time an instance is generated, A new greeting method will be created. But in fact, the greeting methods are the same, and there is no need to generate them multiple times and waste resources, so the JavaScript prototype object was born. JavaScript stipulates that each function has a prototype attribute that points to an object.

function Animal(name) {
  this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'

In the above code, the prototype attribute of the constructor Animal is the prototype object of the instance objects cat1 and cat2. Add a color attribute to the prototype object. As a result, all instance objects share this attribute.

The properties of the prototype object are not the properties of the instance object itself. As long as you modify the prototype object, the changes will be immediately reflected in all instance objects.

Animal.prototype.color = 'yellow';
cat1.color // "yellow"
cat2.color // "yellow"

If the instance object itself has a certain property or method, it will not look for the property or method in the prototype object.

cat1.color = 'black';
cat1.color // 'black'
cat2.color // 'yellow'
Animal.prototype.color // 'yellow';

Prototype chain (prototype chain)

JavaScript stipulates that all objects have their own prototype objects (prototype). On the one hand, any object can serve as the prototype of other objects; on the other hand, since the prototype object is also an object, it also has its own prototype. Therefore, a "prototype chain" will be formed: object to prototype, and then to prototype's prototype...

If you trace it back layer by layer, the prototypes of all objects can eventually be traced back to Object. prototype, that is, the prototype property of the Object constructor. In other words, all objects inherit the properties of Object.prototype. The prototype of Object.prototype is null. null does not have any properties or methods, nor does it have its own prototype. Therefore, the end of the prototype chain is null.

The above is the detailed content of Code explanation of prototype and prototype chain in JavaScript. For more information, please follow other related articles on the PHP Chinese website!