preface

JavaScript prototype and prototype chain is a knowledge point that every front-end CV engineer must master, as well as one of the frequent interview questions in the front end exam. A good understanding of JavaScript prototypes and prototype chains will help us learn more about JavaScript. The following is the record of a front-end dish dog after a thorough (100) solution (degree), if there is any mistake, I hope you don’t guide me.

The constructor

Before we look at stereotypes and prototype chains, let’s look at constructors.

Constructors in ECMAScript are used to create objects of a specific type. Custom constructors that define properties and methods for their own object types in the form of functions. — From JavaScript Advanced Programming (4th edition)

Constructor characteristics

  1. There is no explicit creation object;
  2. Properties and methods are assigned directly to this;
  3. There is noreturn.

Js built-in constructor

Object(), Array(), Function(), Number(), String(), Boolean(), Date(), RegExp(), Error()

Custom constructor demo and constructor execution order

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name)
    }
}
let person = new Person("Greg", 20, "Doctor")
person.sayName() // Greg
Copy the code

When the constructor is called, it does the following:

  1. Create a new object in memory.
  2. Inside this new object[[Prototype]]Properties are copied to the constructor’sprototypeProperties;
  3. Inside the constructorthisIs assigned to this new object (i.ethisPoint to a new object);
  4. Execute the code inside the constructor (add attributes to the new object);
  5. If the constructor returns a non-empty object, that object is returned; otherwise, the newly created object is returned.

The difference between a constructor and a normal function

  1. By convention, the first character of a constructor is toA capital, non-constructors are used asLowercase lettersAt the beginning. This will helpDistinguish betweenConstructors and ordinary functions.
  2. The only difference between a constructor and a normal function is how it is called. In addition, constructors are functions, and any function is usednewOperator calls are constructors and are not usednewThe function called by the operator is a normal function.

The prototype

Where does the prototype come from, and what is in the prototype object?

  1. Whenever a function is created, one is created for that functionprototypeProperty points to the prototype object. By default, all prototype objectsconstructorAttribute refers back to the constructor associated with it.
  2. When you customize the constructor, the stereotype object is only retrieved by defaultconstructorProperty, which all other methods inherit fromObject. Each call to the constructor creates a new instance, the inside of the instance[[Prototype]]The pointer is assigned to the prototype object of the constructor. This is not accessed in the script[[Prototype]]Features the standard way, howeverFirefox, Safari and ChromeIt’s exposed on every object__proto__Property through which stereotypes can be accessed.

The relationship between constructors, instances, and stereotypes

  1. There is a direct connection between the instance and the constructor stereotype, but not between the instance and the constructor, as shown in the figure below:

  • The constructorPersontheprototypeAttributes point to the constructor’s prototype object;
  • The instanceThe person of__proto__Is also a prototype object that points to a constructor;
  • Archetypal objectconstructorAttributes refer back to the constructor.

Benefits of prototyping

The advantage of using a stereotype object is that the properties and methods defined on it can be shared by the object instance. Therefore, public properties or methods in the instance can be defined in the constructor’s prototype object, reducing redundant code.

function Person(){}
Person.prototype.name = 'Nick'
Person.prototype.sayName = function(){
    console.log(this.name)
}
let person1 = new Person()
person1.sayName() // 'Nick'
let person2 = new Person()
person2.sayName() // 'Nick'
console.log(person1.sayName === person2.sayName) // true
Copy the code

The above code defines a constructor, Person, with a name attribute and a sayName method on the prototype of Person. Two empty objects, instantiated person1 and person2, are then generated from Person, and the sayName method is called from the instance, returning Nick. At the same time, the sayName of person1 and sayName of person2 are strictly equal, indicating that both instances call the same method and both are the prototype sayName.

Hierarchy of prototypes

  • When a property is accessed through an object, a search is initiated by the name of the object, starting with the object instance itself. If the attribute name is found on the instance, the corresponding finger of the attribute is returned; if the attribute is not found, the search follows the pointer into the prototype object, and the corresponding value is returned after the attribute is found on the prototype.
  • While it is possible to read and write values on the prototype object from an instance, it is not possible to override them from the instance. If a property with the same name as that in the prototype object is added to the instance, the property will be created on the instance, even if its value isnullCan also obscure properties on the prototype object.
  • usedeleteThe operator can delete an attribute on an instance, restoring its association with the stereotype attribute.

Prototype chain

A classic prototype chain diagram

expand

Function of the__proto__withFunction.prototypeThe relationship between

__proto__ for all functions (constructors and normal functions) points to function. prototype, which is an empty Function.

Think of a function as an instance whose __proto__ pointer points to the constructor’s prototype object. Any Function comes from function. prototype, even Object and Function itself.

Function.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype  // true
Array.__proto__ === Function.prototype   // true
String.__proto__ === Function.prototype  // true
Number.__proto__ === Function.prototype  // true
Boolean.__proto__ === Function.prototype // true
RegExp.__proto__ === Function.prototype  // true
Error.__proto__ === Function.prototype   // true
Date.__proto__ === Function.prototype    // true
Copy the code

As can be seen from the above figure, Function prototype is also an instance. (A little convoluted, oops)

Object.__proto__.__proto__Point to what

__proto__ refers to the prototype Object of Object.

Object is an instance of Function. Function is an instance of Object. Object is one of the built-in js constructors created by Function constructor. All functions in JS (constructors and ordinary functions) are prototype objects derived from Object…

If I never see you again, good morning, good afternoon, good night.

~~ unfinished, to be continued! Thank you for reading.