preface

Description: The content is summarized from many articles such as Wang Fupeng

I feel like the core of understanding the prototype is this image;

Understand the love triangle between constructors and prototype objects and instances

Constructor finds its prototype object (default value is an object with a constructor attribute pointing to the constructor). Prototype finds its prototype object (default value is an object with a constructor attribute pointing to the constructor). The prototype object points to the constructor via the. Constructor property; Another is for instance to find the prototype object through __proto__ (the hidden attribute is secret crush);

Prototype chain

Prototype chain is when you access a property of an Object, if the property does not exist, you will look for the property of its prototype Object until object.prototype. __proto__ cannot be found and return null. Everything is an object, so the prototype of the object is the end of the prototype chain;

Prototype inheritance

First of all, the main purpose of inheritance is to let the child can use the things of the father, the feeling is like the child inherits the father, since it is inheritance, the child and the father must be the same type, here we will discuss the constructor first; The prototype chain in the prototype meets the need of inheritance, so the prototype inheritance is to form two constructors of the prototype chain;

Function Father(uname, age) {this.uname = uname; this.age = age; } Father.prototype.money = function() { console.log(100000); }; Function Son(uname, age, score) {Father. Call (this, uname, age); Father.call(this, uname, age); this.score = score; } // Son.prototype = Father.prototype; Prototype = new Father(); son.prototype = new Father(); // If you modify a prototype object using the form of an object, remember to use constructor to refer back to the original constructor in order to form a perfect prototype object chain, Otherwise Son. Prototype. Point constructor is Father Son. The prototype. The constructor = Son; Son.prototype.exam = function() {console.log(' kids take tests '); } var son = new son (' I ', 18, 100); console.log(son);Copy the code

Father. Call (this, uname, age); Son.prototype = new Father(); Because the son can use father. Money, in order to avoid calling problems such as increased son in the prototype. The constructor = son; See ruan Yifeng for details;

Understand the closed loop relationship between Object and Function

Function. __proto__ refers to Function. Prototype. Function.prototype.__proto__ refers to Object.prototype; Prototype: Function builds prototype instances, Object builds __proto__ instances, and JS builds __proto__ instances.

This explains my earlier confusion: why Object constructs don’t have prototype, while function constructs have prototype;

Understand the operation of new

The new procedure creates a new object that inherits the constructor’s stereotype and properties, and is returned as an instance of the procedure.

  • Create a new object based on the constructor’s Prototype property.
  • Pass this(the new object in the previous sentence) and the call parameters to the constructor, and execute;
  • If the constructor does not manually return an object, the new object created in the first step is returned. If it does, the new object created in the first step is discarded and the manually returned object is returned.

You can write the relevant code like this

Let newMethod = function (Parent,... Rest) {// 1. Create a new object using the constructor's prototype property; let child = Object.create(Parent.prototype); // 2. Pass this and call parameters to the constructor to execute let result = Parent. Apply (child, rest); Return typeof result === 'object'? result : child; };Copy the code

Or according to js you don’t know:

The new call:

  • 1) Create or construct a new object,
  • 2) The new object is connected by the [prototype]
  • 3) The new object is bound to the function call’s this
  • 4) If the function returns no other object, the function in the new expression automatically returns the new object

That is

function createnew(person,... rest){ let obj = new Obejct(); obj.__proto__=person.prototype; let result = person.call(obj,... rest); return typeof result ==='object'? result : obj }Copy the code

The above is my summary. If there are any problems, I hope to point out that I can learn to learn.