Comprehensive analysis of prototypes, prototype objects, and prototype chains in js

Understanding Prototypes

Every function we create has a prototype property, which is a pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. Consider the following example:

function Person(){
}
Person.prototype.name = 'ccc'
Person.prototype.age = 18
Person.prototype.sayName = function (){
 console.log(this.name);
}

var person1 = new Person()
person1.sayName() // --> ccc

var person2 = new Person()
person2.sayName() // --> ccc

console.log(person1.sayName === person2.sayName) // --> true

Understanding Prototype Objects

According to the above code, see the following figure:

Three points need to be understood:

1. As long as we create a new function, a prototype property will be created for the function according to a specific set of rules, pointing to the prototype object of the function. That is, Person (constructor) has a prototype pointer that points to Person.prototype
2. By default, a constructor property is created on each prototype object. This property is a pointer to the function where the prototype property is located.
3. Each instance has a pointer (internal property) inside that points to the prototype object of the constructor. That is, person1 and person2 both have an internal property __proto__ (in ECMAscript, this pointer is called [[prototype]], although there is no standard way to access [[prototype]] in scripts, Firefox, IE, and Chrome all support a property called __proto__) pointing to Person.prototype
   

Note: There is no direct relationship between the person1 and person2 instances and the constructor.

As we mentioned before, [[prototype]] is not accessible in all implementations, so how do we know if there is a relationship between the instance and the prototype object? There are two ways to judge here:

• Prototype online method: isPrototypeOf(), such as: console.log(Person.prototype.isPrototypeOf(person1)) // --> true
• A new method added in ECMAscript5: Object.getPrototypeOf(), this method returns the value of [[prototype]]. For example: console.log (Object.getPrototypeOf(person1) === Person.prototype) // --> true
  

Relationship between instance properties and prototype properties

We mentioned earlier that the prototype initially contains only the constructor property, which is also shared and therefore accessible through the object instance. Although you can access the values ​​stored in the prototype through an object instance, you cannot overwrite the values ​​in the prototype through an object instance. If we add a property to an instance and the property has the same name as a property in the instance prototype, then the property will be created on the instance and the property in the prototype will be masked. as follows:

function Person() {}
Person.prototype.name = "ccc";
Person.prototype.age = 18;
Person.prototype.sayName = function() {
 console.log(this.name);
};

var person1 = new Person();
var person2 = new Person();

person1.name = 'www' // Add a name attribute to person1 person1.sayName() // --> 'www'————'From the instance'
person2.sayName() // --> 'ccc'————'from prototype'

console.log(person1.hasOwnProperty('name')) // --> true
console.log(person2.hasOwnProperty('name')) // --> false

delete person1.name // --> Delete the newly added name attribute in person1 person1.sayName() // -->'ccc'————'from prototype'

How do we determine whether a property is an instance property or a prototype property? Here you can use the hasOwnProperty() method to detect whether a property exists in the instance or in the prototype. (This method is inherited from Object)

The following figure analyzes in detail the relationship between the implementation and prototype of the above example in different situations: (the relationship of the Person constructor is omitted)

Simpler prototype syntax

We can't always type Person.prototype every time we add a property and method, as in the previous example. To reduce unnecessary typing, a more common approach is as follows:

function Person(){}
Person.prototype = {
 name: 'ccc',
 age: 18,
 sayName: function () {
 console.log(this.name)
 }
}

In the code above, we set Person.prototype equal to a new object created as an object literal. The end result is the same, with one exception: the constructor property no longer points to Person. As we mentioned earlier, every time a function is created, its prototype object is created at the same time, and this object automatically acquires the constructor property. But in the new syntax we use, the default prototype object is essentially completely rewritten, so the constructor property becomes the constructor property of the new object (pointing to the Object constructor), and no longer points to the Person function. At this point, although the instanceof operator can still return the correct result, the type of the object can no longer be determined through the constructor. as follows:

var person1 = new Person()
console.log(person1 instanceof Object) // --> true
console.log(person1 instanceof Person) // --> true
console.log(person1.constructor === Person) // --> false
console.log(person1.constructor === Object) // --> true

Here, the instanceof operator is used to test Object and Person and still returns true. The constructor property is equal to Object, not Person. If the constructor is really important, you can write it like this:

function Person(){}
Person.prototype = {
 constructor: Person, // --> reset name: 'ccc',
 age: 18,
 sayName: function () {
 console.log(this.name)
 }
}

However, this will cause a new problem. Resetting the constructor property in the above way will cause its [[Enumerable]] attribute to be set to true. By default, native constructor properties are not enumerable. So if you want to use an ECMAscript5-compatible JavaScript engine, you can try Object.defineProperty().

function Person(){}
Person.constructor = {
 name: 'ccc', 
 age: 18,
 sayName: function(){
 console.log(this.name)
 }
}
// Reset the constructor, only applicable to ECMAscript5 compatible browsers Object.defineProperty(Person.constructor, "constructor", {
 enumerable: false, 
 value: Person
})

Dynamics of Prototype

Since the process of looking up a value in the prototype is a single search, any changes we make to the prototype object are immediately reflected in the instance. for example:

function Person(){}
var person1 = new Person()
Person.prototype.sayHi = function(){
 console.log('hi')
}
person1.sayHi()

In the above code, we first create a Person instance and save it in person1, and then add the sayHi() method to Person.prototype. Even though person1 was created before the new method was added, it can still access this method. The reason is the loose connection between instances and prototypes.
Although you can add properties and methods to a prototype at any time, they will be immediately reflected in the instance. But if you rewrite the entire prototype object, then the situation is different. Look at the following code:

function Person(){}
var person1 = new Person()

Person.prototype = {
 name: 'ccc',
 age: 18,
 sayName: function(){
 console.log(this.name)
 }
}

person1.sayName() // --> error

See the following figure for analysis:

When the constructor is called, a [[prototype]] pointer to the original prototype is added to the instance, and changing the prototype to another object is equivalent to severing the connection between the constructor and the original prototype. Remember: the pointer in the instance only points to the prototype, not to the constructor.

Understanding the prototype chain

The prototype chain is the main method to achieve inheritance. The basic idea is to have one reference type inherit the properties and methods of another reference type. Before understanding the prototype chain, we must first sort out the relationship between the prototype, prototype object, and instance: 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. What if we make the prototype object equal to an instance of another type? Obviously, this prototype object will contain a pointer to another prototype. Look at the code first and then the picture:

function SuperType(){
 this.property = true
}

SuperType.prototype.getSuperValue = function(){
 return this.property
}

function SubType(){
 this.subProperty = false
}

// Inherits SuperType
SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function (){
 return this.subProperty
}

var instance = new SubType()
console.log(instance.getSuperValue()) // --> true

The above code defines two types: SuperType and SubType. Each type has one property and one method.

Analyzing the above figure: instance points to the SubType prototype, and the SubType prototype points to the SuperType prototype. The getSuperValue() method is still in SuperType.prototype, but the property is in SubType.prototype. This is because property is an instance attribute, while getSuperValue() is a prototype method. Since SubType.prototype is now an instance of SuperType, the property is of course located in that instance. Also note that instance.constructor now points to SuperType, because the original constructor in SubType.prototype has been rewritten.
Why does it return true?
Analysis: Calling the instance.getSuperValue() method will go through three search steps:

Search for instances Search for SubType.prototype
Search SuperType.prototype until you find the method here. If no property or method is found, the search process will always proceed one link at a time to the end of the prototype chain before stopping.

Don't forget the default prototype

You should know that all reference types inherit Object by default, and this inheritance is also implemented through the prototype chain. The default prototype of all functions is an instance of Object, so the default prototype contains an internal pointer pointing to Object.prototype, which is why all custom types have toString() and valueOf() methods. So the complete prototype chain should be as follows:
Look at the following figure, the interior of subType:

Detailed diagram:

In a word, SubType inherits SuperType, and SuperType inherits Object. When calling instant.toString(), the method actually called is the method stored in Object.prototype.

Determine the relationship between prototypes and instances

When a prototype chain is very long, there are two ways to determine the relationship between the prototype and the instance:

Use the instanceof operator. As long as you use this operator to test the instance and the constructor that appears in the prototype chain, the result will return true.

console.log(instance instanceof Object) // --> true
console.log(instance instanceof SuperType) // --> true
console.log(instance instanceof SubType) // --> true

Use the isPrototypeOf() method, which is similar to the instantof judgment method. As long as the prototype appears in the prototype chain, it will return true.

console.log(Object.prototype.isPrototypeOf(instance)) // --> true
console.log(SuperType.prototype.isPrototypeOf(instance)) // --> true
console.log(SubType.prototype.isPrototypeOf(instance)) // --> true

Define methods carefully

A subtype sometimes needs to override a method in a supertype, or needs to add a method that does not exist in the supertype. But in any case, the code to add methods to the prototype must be placed after the statement that replaces the prototype. as follows:

function SuperType(){
 this.property = true;
}
SuperType.prototype.getSuperValue = function(){
 return this.property
}

function SubType(){
 this.subProperty = false;
}

// Inherits SuperType
SubType.prototype = new SuperType()

// Add new method SubType.prototype.getSubValue = function(){
 return this.subProperty
}
// Override the method in the super type SubType.prototype.getSuperValue = function(){
 return false
}

var instance = new SubType()
console.log(instance.getSuperValue()) // --> false
var instanceSuper = new SuperType()
console.log(instanceSuper.getSuperValue()) // -> true

In the above code, the first method getSubValue() is added to SubType. The second method, getSuperValue(), is a method that already exists in the prototype chain, but overriding this method will mask the original method. That is, when getSuperValue() is called through an instance of SubType, the redefined method is called, but when getSuperValue() is called through an instance of SuperType, the original method will continue to be called. Another point is that when inheritance is implemented through the prototype chain, you cannot use object variables to create prototype methods, because this will rewrite the prototype chain and cause the prototype chain to be cut off.

The problem with the prototype chain

When inheritance is implemented through prototypes, the prototype actually becomes an instance of another type, so the original instance properties become the current prototype properties, which causes the properties to be shared. Look at the following code:

function SuperType(){
 this.colors = ['white', 'blue']
}

function SubType(){
}

// Inherits SuperType
SubType.prototype = new SuperType()
var instance1 = new SubType()
instance1.colors.push('red')

var instance2 = new SubType()
console.log(instance1.colors) // -->["white", "blue", "red"]
console.log(instance2.colors) // -->["white", "blue", "red"]

When creating an instance of a subtype, you cannot pass parameters to the supertype's constructor. In fact, there should be no way to pass parameters to the supertype constructor without affecting all object instances. Therefore, in practice the prototype chain is rarely used alone.

The above is the detailed content of the diagram of prototype, prototype object, and prototype chain in js. For more information about prototype, prototype object, and prototype chain in js, please pay attention to other related articles on 123WORDPRESS.COM!