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

This article mainly introduces "how to understand js native syntax prototype,__proto__ and constructor". In daily operation, I believe many people have doubts about how to understand js native syntax prototype,__proto__ and constructor. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand js native syntax prototype,__proto__ and constructor"! Next, please follow the editor to study!

Pre-knowledge point

2.1 data types

There are seven data types in js

It can be divided into two categories from whether attributes can be read or not.

You can read properties:

Can have its own attribute: object

You cannot have attributes on your own: string,number,boolean,symbol

Cannot read attribute: null,undefined

Null,undefined type, read and set properties are illegal, directly report an error.

Only object can have its own properties, which can be read and set.

String,number,boolean,symbol type can read properties, in fact, is first constructed to wrapper object, and then read properties, setting properties is the same, it is understandable to set to the wrapper object that will be destroyed immediately, that is, it can be set, but it does not have any real effect.

2.2 determine whether it is a self-attribute (hasOwnProperty)

The hasOwnProperty method is inherited and is used to determine whether this property exists on the object itself, no matter what the value is.

Const obj = {a: 1} const o = Object.create (obj) o.b = 1o.c = void 0console.log ('avalues, o.a, o.hasOwnProperty (' a')) / / can read the value and inherit it, but not its own attribute console.log ('breadth, o.b, o.hasOwnProperty (' b')) / / can read the value, its own attribute console.log ('censor, o.c) O.hasOwnProperty ('c')) / / read to undefined, its own attribute console.log ('dink, o.d, o.hasOwnProperty (' d')) / / read to undefined, it is not its own attribute, nor does it inherit a little bit of thinking about this attribute.

A program is a data structure and algorithm. A good program had better use the smallest memory to store data and use the fastest time to complete the run to get the result.

Reusing data can reduce memory usage, for example, if an and b need to complete the same function, they can reuse the same method (property).

Then we need to solve the problem of where the reuse method exists and how an and b can find it.

The solution in js is that both an and b are constructed from functions (let's call it Function here), and the reused methods are stored in the function (prototype attribute).

(because only constructors need to store reusable methods, prototype is only available on constructable functions, arrow functions are not used to construct, and there are no other objects. If they are not even functions, they will not have this property.)

Then it is necessary to establish a connection between Function b and Function, because AME b needs to find reuse methods that they can use.

The implementation in js is through the constructor attribute, that is, a.constructor, and b.constructor can find Function

So through a.constructor.prototype, you can find the storage address of the methods it can reuse. In order to find js quickly, it provides a quick way to find it in one step, that is, a.constructor.prototype and A. find the same object in one step, and of course they are congruent.

/ / neither of them has its own attributes, and I don't know how to find the prototype object from these two attributes. Const obj = {} console.log (obj.hasOwnProperty ('_ proto__')) / / falseconsole.log (obj.hasOwnProperty ('constructor')) / / false

(so, if you manually change the direction of the constructor,prototype,__proto__, you need to know what you're doing.)

(I don't know if the designers of js think so, , I just think so, it's much easier to understand)

(this process is called inheritance, and it is a chained process, that is, it can be searched like this by a.constructor.prototype.constructor.prototype.constructor.prototype until the top is found. This process can be accelerated by a. Prototype chain. This is called prototype chain. This is the only way to implement js inheritance.)

(the above is just a guide to the thinking process. In fact, finding prototype objects will not be found through a.constructor.prototype, but directly through _ _ proto__)

Modify constructor

Const Dog = function () {} const dog = new Dog () dog.constructor = 0console.log (dog.hasOwnProperty ('constructor')) / / trueconsole.log (dog.constructor) / / 0console.log (dog.__proto__.constructor) / / [Function: Dog]

In summary, this property has been modified to increase the difficulty of finding the constructor that constructed it. It can not be obtained directly, but needs to be read from the prototype object.

If both its own property and the property on the prototype are modified, then its constructor is just not found, and there will be no other effect.

Instanceof

Instanceof cares about the prototype chain, not constructor.

Verifying the above point and modifying the constructor property has no effect except that the instance cannot find the constructor that constructed it. If you need to find its constructor through an instance, you need to maintain the relationship between the two.

/ / the syntax is / / an instanceof / this operator determines whether there is b.prototype on the prototype chain of a, because to judge b.prototype, b must be a constructable function, otherwise it will report an error const fn = function () {} const o = Object.create (fn.prototype) / / at this time there is fn.prototype on the prototype chain of o. Because o.protoprotoplast _ = = fn.prototypeconsole.log (o instanceof fn) / / trueconst emptyObj = {} fn.prototype = emptyObj// there is no fn.prototype on the prototype chain at this time, because o.protoprotozoa _ is no longer equal to fn.prototype at this time, console.log (o instanceof fn) / / falseo.__proto__ = emptyObj// modifies o.protoprotozoa _ and console.log (o instanceof fn) / / trueisPrototypeOf

Now there is a new api, which implements the same function as instanceof, but is more semantic, directly determining whether the object is on the prototype chain of another object.

Const fn = function () {} const o = Object.create (fn.prototype) console.log (fn.prototype.isPrototypeOf (o)) / / true modify _ _ proto__ | prototype

Let's start with a summary. When constructing an instance, we will point the _ _ proto__ of the instance to the prototype of the constructor at this time, and then the instance actually inherits _ _ proto__. (why emphasize this time, because the prototype of the constructor may be modified to point to, and the modification will only affect the instance constructed after modification, and the instance constructed before modification will also use the prototype before modification)

So, you can understand the impact of modifying _ _ proto__ and prototype

1. Modify the direction of _ _ proto__

Will only affect its own inheritance.

Const Dog = function () {} const dog = new Dog () const d = new Dog () Dog.prototype.name = 'Dog'dog.__proto__ = {name:' _ proto__',} console.log (d.name) / / Dogconsole.log (dog.name) / / _ _ proto__

two。 Modify the properties of _ _ proto__

Examples that will affect the structure of this band.

Const Dog = function () {} const dog = new Dog () const d = new Dog () Dog.prototype.name = 'Dog'console.log (d.name) / / Dogconsole.log (dog.name) / / DogDog.prototype = {name:' after' } const dog1 = new Dog () const D1 = new Dog () console.log (d1.name) / / afterconsole.log (dog1.name) / / afterdog1.__proto__.name ='_ _ proto__'// you can see the instances that only affect the current construction, and the previous and subsequent ones will not be affected, because the same Dog.prototype is in this segment. Their _ _ proto__ all point to its console.log (d1.name) / / _ _ proto__console.log (dog1.name) / / _ _ proto__Dog.prototype = {name: 'new',} const dog2 = new Dog () const D2 = new Dog () console.log (d2.name) / / newconsole.log (dog2.name) / / new

3. Modify the direction of the prototype

Examples that will affect the structure of this band.

4. Modify the properties of prototype

An example that will affect the construction of this band is the same as modifying the attribute of _ _ proto__

How to modify and get prototype objects

Modify

It has been mentioned above to modify prototype and _ _ proto__

Object.create

Const obj = {name: 'objName',} const o = Object.create (obj) / / it is equivalent to o.protoplast _ = obj, but it is recommended to use `Object.create`console.log (o.name) / / objNameconsole.log (o.protoplast _ = = obj) / / trueObject.setPrototypeOf

Const obj = {name: 'objName',} const o = {} Object.setPrototypeOf (o, obj) / / it is equivalent to o.protoprotozoa _ = obj, but it is recommended to use `Object.setPrototypeOf`Const proto = Object.getPrototypeOf (o) console.log (proto = obj & & proto = = o.protoprotoplast _) / / trueconst obj1 = {} o.protoprotoplast _ = obj1const proto1 = Object.getPrototypeOf (o) console.log (proto1 = = obj1 & & proto1 = = o.protoprotozoa _) / true

To sum up, when to use Object.create and when to use Object.setPrototypeOf? first of all, both of them are standard api, both of which are recommended. When creating objects, you should specify Object.create when creating prototypes, and when you need to modify prototype objects dynamically, use Object.setPrototypeOf.

Get

As I said before, I got it through constructor.prototype and _ _ proto__.

Object.getPrototypeOf

Const obj = {name: 'objName',} const o = {} Object.setPrototypeOf (o, obj) const proto = Object.getPrototypeOf (o) console.log (proto = obj & & proto = = o. Native constructor built into truejs

The prototype properties of these native constructors are not writable, enumerable, or configurable

Console.log (Object.getOwnPropertyDescriptor (Object, 'prototype')) / / {/ / value: [Object: null prototype] {}, / / writable: false,// enumerable: false,// configurable: false//} what is the top of js inheritance

Null, it has to be this guy, or it will have to be an infinite set of babies.

Then all other objects are constructed from Object, so all objects can inherit from Object.prototype.

Const obj = {} const o = new Object () second-class citizen inherited by js (Function)

In the little thinking above, it is said that js objects are constructed by functions, so Object, including Object, is also constructed by Function, even by itself.

Console.log (Object.constructor = Function) / / true// this is outrageous, where did the first Function come from? console.log (Function.constructor = Function) / / true

Let me give you a little bit of understanding. I may have done a little processing inside js. The first Function was made out of thin air. Then the Function constructs Object, and then the Object constructs the first prototype object, Object.prototype, and then modifies some reference relationships.

Actually, the most complicated thing is the relationship between Object and Function.

Console.log (Object.__proto__ = Function.prototype) / / trueconsole.log (Function.constructor = Function) / / trueconsole.log (Function.__proto__ = Function.prototype) / / trueconsole.log (Function.prototype.__proto__ = Object.prototype) / / third-class citizens inherited by truejs (other built-in constructors)

Const arr = [String, Array, Boolean, Number, Date, RegExp, Error, Promise, Map, Set, Symbol, Proxy,] / / are all user-defined citizen constructors constructed by Function.

This is the point. According to the above understanding, I will write another article about the inheritance of js that I understand. Here, I will leave a hole.

At this point, the study on "how to understand js native syntax prototype,__proto__ and constructor" 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.