August to progress (A) : Talk about prototype objects and prototype chains 🐻 | August more text challenge

Prototype objects and prototype chains are very important topics in javascript, not only for interviewers, but also for all of us

The following is just my personal opinion after reviewing the past. In the future practice and application, I hope I can have a higher level of opinion

A prototype object

What is a prototype object? With that in mind, let’s look at the following extension


function Person (uname, age) { this.uname = uname; this.age = age; This.sing = function () {console.log(' sing '); }} let o1 = new Person(' zhang3 ', 23); console.log(o1); Let o2 = new Person(' 四', 22); console.log(o2);Copy the code

So, first of all, we have a constructor template, we have uname and age, we have sing and then we instantiate o1 and O2, and we have uname and age and sing. But this sing method, every time we create a new object, we create a new space to store this function, and this function is exactly the same, which is a waste of memory space, so we just store this sing method on the prototype object.

prototype

So here, we say the prototype object is a property of the constructor (function), which any function has. This property is called prototype. Also, the property Prototype is an object.

Let’s write it this way up here to make it more formal

function Person(uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function () {console.log(" sing "); };Copy the code
  • The constructor’s Prototype property points to an object we call a prototype object or prototype
  • Every constructor has this property
  • When the instance object cannot find a member, it looks for a member on the prototype object

At this time, let’s sum up. Because of the waste of memory, we put Sing on the prototype object. All instantiated objects will have this method, which greatly saves the memory space. Therefore, all properties and methods in the stereotype object can be inherited by the constructor’s instantiation object.

But we need to know that methods can also be placed on constructors, and methods can also be placed on prototype objects

constructor

function Person () {}
console.log( Person.prototype );
Copy the code

We see that the prototype object of the Person constructor has a constructor property, which refers back to the constructor itself.

console.log(Person.prototype.constructor);
Copy the code

The output is“, referring back to the constructor itself

__proto __

The __proto __ attribute is a nonstandard attribute that has not yet been recognized by the W3C, but it does exist. __proto __ is used to refer back to a prototype object.

Let’s go back to the example above

function Person (uname, age) { this.uname = uname; this.age = age; } Person. Prototype. Sing = function () {console.log(' sing ')} let obj = new Person(' king ', 22); console.log(obj.__proto__ === Person.prototype); // trueCopy the code

So, the instance object’s __proto __ points to the prototype object, proving our result.

And here, we can refer to __proto __ as an object prototype, also called an implicit prototype, and prototype as a display prototype.

What is the relationship between a constructor, an instance, and a prototype object

Constructors are used to instantiate objects, and each constructor has oneA prototype objectWe can put some common methods into existenceA prototype objectThe instance object itself may not have these methods, but it can use them. Why? Just because you can’t find these members on the instance object, it goes along__proto __To find these members on the prototype object,A prototype objectTo record which constructor it belongs to, you can passconstructorRefers back to the constructor itself.

So, again, what is a prototype object for??

When the instance method or attribute of the corresponding constructor of the prototype object does not exist, the prototype object will be searched. Combined with the characteristics of the constructor prototype, the encapsulated functional functions are often added to the prototype object in actual development

Prototype chain

It’s easy to think of a scope chain when we talk about a prototype chain, and they’re very similar, so let’s draw a picture of what a prototype chain is. Okay

Prototype chain: Is the resulting prototype object an object formed by a chain of prototypes? Is!!! So each object has __proto __, which in turn points to the prototype object at the next level, which exists

console.log(obj.__proto__.__proto__)
Copy the code

The constructor object is a property of the constructor. Again, we can use constructor to indicate which constructor it belongs to.

console.log(obj.__proto__.__proto__.constructor)
Copy the code

Refers back to the built-in Object function, so it is the prototype Object for the built-in Object constructor

Until null is found, the chain structure is the prototype chain. Sure, it’s easy.

A diary

I hope tomorrow you will appreciate your efforts today!