Stereotypes and prototype chains are inescapably important concepts in JavaScript, so how do you understand them? Here is my understanding and summary of prototypes and prototype chains. Perhaps some understanding is relatively shallow, with the passage of time and in-depth understanding, will be supplemented later. If you find any problems with my understanding, please point them out in the comments.

1. Why is javaScript designed to be prototype-based

In the past learning process, we have learned that the object-oriented language Java has three characteristics: encapsulation, inheritance, polymorphism. Java and javascript are not exactly the same when it comes to inheritance. So how is javascript designed? Early, the browser can only browse the web content, not for user interaction, also said when we enter the account password to log in, the browser can’t judgment, the content of the input it needs to judge by the server, and netscape to solve this problem, invented a kind of auxiliary scripting language used with Java, and some similar on grammar. It can be seen that javascript is influenced by Java, which are all object types. If there are objects, inheritance mechanism will be involved. Then what is the inheritance mechanism of JS? JS takes a reference to Java’s design and uses the New operator to generate objects, which differs from Java in that new is followed by Construtor instead of Class.

Function Person(age) {this.age = age this.nation function Person(age) {this.age = age this.nation = 'China'} var father = new Person(42)Copy the code

2. Constructor

Constructors are normal functions that also have the prototype property, except that they require a capital initial. When a constructor is called with the new operator, it performs four steps: 1. Create a new object 2. Point this to the new object 3. Execute the constructor to add properties and methods to the new object. 4

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')
Copy the code

3. The prototype prototype

Any function has a Prototype property that points to the Prototype object. A stereotype is an object, and properties defined on the stereotype are inherited (implemented by the new operator) and the instantiated object owns those properties. Relationship between stereotype and constructor: The constructor has a Prototype property that gives access to the stereotype.

For example, in the constructor code, Food is the constructor, food. prototype is the prototype, and Food is an object generated by referring to Food.prototype.

4. Examples of the instance

An instance is an object created through a constructor. When the new operator is used, the constructor’s prototype object is assigned to the instance’s proto property.

In short, we create a food instance using the new operator, and we can verify the relationship between the instance and the constructor through instanceof.

function Food (name) { this.name = name this.eat = function () { console.log('eat') } } var food = new Food('banana') // Instantiate var res = food instanceof food // Check if food is food instance console.log(res) // trueCopy the code

When we define a property on a stereotype, that property is also assigned to the instance.

function Food (name) { this.name = name this.eat = function () { console.log('eat') } } var food = new Food('banana') // Var res = food instanceof food // Check if food is the food instance console.log(res) // true // Prototype defines the attribute food.prototype.type = 'object named Food' var foodRes = food.type // Console. log(foodRes) // object named FoodCopy the code

5. Implicit prototypingproto

Any object is created with a proto property that points to the prototype object that generated the constructor of the current object. Because this attribute is not specified by the standard, do not change the value of this attribute to break the stereotype chain. That is, the instance can access the stereotype through the proto attribute.

The proto property of an object is not accessible in all implementations, but the isPrototypeOf() method can be used to determine whether such a relationship exists between objects.

function Food (name) { this.name = name this.eat = function () { console.log('eat') } } var food = new Food('banana') // Instantiate the console. The log (food. __proto__ = = = the food. The prototype) / / true console. The log (food) prototype) isPrototypeOf (food)) / / trueCopy the code

6. Constructor

The constructor is accessible through the Prototype property, and the prototype has access to the constructor via a constructor property. The constructor property is not the real constructor, so don’t confuse the two.

function Food (name) {
    this.name = name
    this.eat = function () {
        console.log('eat')
    }
}
var food = new Food('banana')
console.log(Food.prototype.constructor === Food) //true
Copy the code

Key: Prototype’s constructor points to the constructor itself

The relationship between constructor, prototype, and instance should look like this:

To better understand this process, LET me tell you a story: 1. A long time ago, a sculptor came across a very delicate vase. One day, he wanted to make a fortune by copying the vase in mass production, so he analyzed the vase first, restored the carving process, and designed a production line (structure Food). Then through this production line, many, many duplicate vases are carved. (example food)

7. The prototype chain

Proto is an attribute of any object. A chain connected by proTO will be formed in JS, and proTO will be accessed recursively until the value is null. The chain relationship formed in this search process is the prototype chain.

function Food (name) { this.name = name this.eat = function () { console.log('eat') } } var food = new Food('banana') // Instantiation / / prototype chain console. The log (food. __proto__) / / food {} the console. The log (food) __proto__) __proto__) / / {} console.log(food.__proto__.__proto__.__proto__) // nullCopy the code

The diagram below:

conclusion

1. Every function created has a prototype property, which is a pointer to an object called food.prototype. 2. The default property constructor on the stereotype object is also a pointer to its associated constructor. 3. Every instance object generated by the new operator has an internal property pointing to the prototype object, which has access to all properties and methods on the prototype object. 4. The instance can access the prototype object via an internal pointer, and the prototype object can find its constructor via constructor. 5. Each constructor has a prototype object that contains a pointer to the constructor, and the instance contains an internal pointer to the prototype object. 6. Proto_ pointing depends on how the object is implemented when it is created. Constructor instances, encapsulated functions that are constructors if called with the new operator, but not otherwise. 8. Finding a property along the entire prototype chain has an impact on performance. The higher the prototype object, the greater the impact on performance. 9. Everything in js is an Object. New Function is a Function Object and its constructor is Function, while the constructor of ordinary objects is Object. 10. Every object has a Proto attribute, and every function object has a Prototype attribute.

Reference source

JavaScript Advanced Programming

The last

If you read through this article, you will have a new understanding of stereotypes and prototype chains in JavaScript. If you think it helps, give it a thumbs up! If you find any problems with my understanding, feel free to point it out in the comments.