Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what is the prototype and prototype chain in JavaScript". In daily operation, I believe that many people have doubts about what is the prototype and prototype chain in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the question of "what is the prototype and prototype chain in JavaScript?" Next, please follow the editor to study!

Prototype chain diagram

Necessary knowledge of prototype

To understand the prototype, you must understand three properties: _ _ proto__, prototype, and constructor.

1. The attributes of protoplast _ and constructor are unique to the object.

The 2.prototype property is unique to the function

The function in 3.js is also a kind of object, so the function also has properties _ _ proto__ and constructor.

The five rules of the prototype:

1. All reference types (objects, arrays, functions) have object properties, that is, they are free to extend properties

two。 All reference types (objects, arrays, functions) have a _ _ proto__ (implicit prototype) property, which is a normal object.

3. All functions have the prototype (explicit prototype) property, which is also a normal object

4. All reference types (objects, arrays, functions) _ _ proto__ values point to the prototype of its constructor

5. When trying to get a property of an object, if the variable itself does not have this property, it will look for it in its _ _ proto__

Prototype property (display prototype)

First create a constructor

Var Parent = function () {} / / defines a function that is just a normal function var p1 = new Parent (); / / becomes the constructor by the keyword new,Parent / / creates an instance of the Parent constructor p1

Prototype is a property unique to the function, through which the prototype can be accessed

Prototype was designed to implement inheritance, so that all instances created by a specific function share properties and methods, or all objects instantiated by a constructor can find common methods and properties. With prototype, instead of creating duplicate property methods for each instance, we create property methods on the prototype object of the constructor (prototype). Those that do not need to be shared are created in the constructor.

Parent is the constructor, and Parent.prototype is the prototype.

The properties and methods added to the Parent.prototype are called prototype properties and prototype methods, and instances of this constructor can be accessed and called.

Proto property (implicit prototype)

The _ _ proto__ property is unique to objects, including functions.

Each object has a _ _ proto__ property, which points to the prototype object of that object.

P1.The protoplast _ = Parent.prototype; / / true

_ _ proto__ is usually called an implicit prototype, and prototype is often called an explicit prototype. It can be said that the implicit prototype of an object points to the explicit prototype of the object's constructor. Then the property methods defined on the explicit prototype are passed to the instance of the constructor through the implicit prototype. This makes it easy for the instance to access the methods and properties on the constructor prototype.

The implicit prototype of Parent.prototype points to the object prototype

Parent.prototype.__proto__ = Object.prototype; / / true

This leads to the concept of prototype chain. When p1.toString () is called, we first look for it in the p1 object itself. If we don't find it, we find the prototype object Parent.prototype through p1.prototype prototype _, and then we find the upper prototype object Object.prototype through Parent.prototype.__proto__. The toString method is found on this layer. Returns the method for use by p1.

Of course, if you don't find it on Object.prototype, look for it in Object.prototype.__proto__, but Object.prototype.__proto__ = = null so return undefined. This is why undefined is returned when accessing a property that does not exist in the object.

Constructor attribute

Since the constructor accesses the prototype through prototype, the prototype should also be able to access the constructor in some way, which is constructor.

For example, the previous example p1 is an object, then the constructor of p1 is Parent (). The constructor of Parent is Function ()

P1.constructor = > f Parent {} Parent.construtor = > f Function () {[native code]} Function.constructor = > Function () {[native code]}

Function is the root constructor of all functions.

As you can see from the example, the constructor attribute of p1 points to Parent, so Parent is the constructor of p1. Similarly, the constructor attribute of Parent points to Function, so Function is the constructor of Parent, and then verifies that Function is the root constructor.

At this point, the study of "what are the prototypes and prototype chains in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.