JS prototype, prototype chain understanding [practice]

This blog is aimed at the Chrome environment. The content of the blog is limited to personal practice and understanding. If there is any error, please correct me

Practice summary

  • Objects have proto attributes
  • Function type objects are a special kind of objects. They all have prototype attributes, and their proto attributes all point to the Function prototype object (because constructor objects are all instances of Function built-in objects, and the proto attributes of Object, Function and other built-in function type objects also point to Function prototype objects because of built-in rules ).
  • The prototype object is an ordinary object, and its proto attribute points to the Object prototype object. The prototype object is created with the creation of the function type object. The built-in function type object usually has a built-in prototype object with some built-in properties, while the prototype object of the ordinary Function instance function type object will be a prototype object with a constructor and a proto Empty object container for attributes.
  • The prototype chain is the proto chain (the blue line in the picture below)
  • In Java, Object is the ancestor of all classes. In JavaScript, the Object prototype is the end of all prototypes in the prototype chain.
A thousand words per chart

Insert picture description here

1. General object: Object (built-in)

View Object

Insert picture description here

Analyze Object objects (the above picture shows that the whole picture is too long, the following conclusions can be verified by the console window debugger)
  • Object object is one of the four basic objects of JavaScript. It can be used to create ordinary objects. It belongs to function type objects and has prototype properties and _proto_ properties.
  • Object.prototype is an ordinary object with many built-in properties. The difference is that it has no proto property (the end of the prototype chain).
  • Object._ proto _指向Function.prototype

2. Function object: Function (built-in)

View Function object

Insert picture description here

Analyze the Function object
  • Function object is one of the four basic objects of JavaScript. It can be used to create constructor object. It belongs to function type object and has prototype attribute and _proto_ attribute.
  • Function.prototype is built-in, and Function.prototype.proto points to the Object prototype object.
  • Function._ proto _指向Function.prototype

3. Constructor Object

Get the constructor object
let Person = function(name){
    
    this.name=name}
View the constructor object

Insert picture description here

  • The constructor object is an instance of the built-in object Function.
    Insert picture description here
Analyze the constructor object
  • All constructor function objects are instances of the built-in object Function, belonging to function type objects, and have prototype and _proto_ properties.
  • Person.prototype is an empty ordinary object, its proto attribute points to Object, the difference is that it also comes with a constructor attribute points to the constructor object Person.
  • Person._ proto _ points to Function.prototype (as shown below, to prove the first point)
    Insert picture description here

4. Construct function prototype object

Get the constructor prototype object

No need to create, the constructor object is a special type of object in JavaScript. When creating the constructor object, a prototype object is created and a one-to-one relationship between the two is established. The relationship between the two is Person = Person.prototype.constructor, But note that this reference relationship can be changed with the assignment.

View the constructor prototype object

Insert picture description here

Analyze the constructor prototype object
  • It is an ordinary object with _proto__ attribute, and comes with constructor attribute when generated by default.
  • Person.prototype.constructor points to Person by default.
  • Person.prototype._ proto _ points to Object.prototype by default.

5. Instance Object

Get instance object
let p = new Person('zhangsan')
View instance objects

Insert picture description here

Analyze instance objects
  • It is an ordinary object with proto attributes.
  • p.proto points to construct Person.prototype

6. Prototype chain

The search rule of the JavaScript executor (Chrome environment) when searching for object properties is to search upwards along the proto_ chain step by step until it encounters null (after discussing Object above, we can see that the built-in Object.prototype has no _proto__ property) .

Guess you like

Origin blog.csdn.net/jw2268136570/article/details/108068612