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

Today, I would like to talk to you about JavaScript prototype and case analysis, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

The relationship among the prototype of constructor instance

1. Any function has a prototype property, which is an object

Function F () {} console.log (F.prototype) / / = > object// prototype object F.prototype.sayHi = function () {console.log ('hippie')}

two。 The prototype object of the constructor has a constructor property by default, which points to the function where the prototype object resides.

Console.log (F.constructor = = F) / / = > true// indicates this

3. The instance object obtained through the constructor contains a pointer _ proto_ to the prototype object of the constructor.

Var instance = new F () console.log (instance.__proto__ = F.prototype) / / = > true

It means that all instance objects created with the current constructor contain a pointer, which is _ proto_, and then this pointer points to the prototype object of the constructor.

So we can access the members on the prototype object directly with the instance.

Example:

Instance.sayHi () / / = > print hi!

Be careful

_ proto_ is a non-standard attribute

Prototype attribute

Javascript states that each constructor has a prototype property that points to another object.

All properties and methods of this object are inherited by the instance of the constructor.

This means that we can define the properties and methods that all object instances need to share directly on the prototype object.

Example:

Function Person (name, age) {this.name = name this.age = age} console.log (Person.prototype) / / print prototype Person.prototype.type = 'human'// mounts human to the properties of the prototype object Person.prototype.sayName = function () {/ / you can also define the function console.log (this.name)} let p1 = new Person (...) let p2 = new Person (...) console.log (p1.sayName = = p2.sayName) / / = > true

We can see that the printed result of this line of code console.log (p1.sayName = = p2.sayName) is true

This is because the type property and the sayName () method of all instances have the same memory address and point to the prototype object, thus improving the running efficiency.

Search principles for attributes or members

We know that multiple instance objects can share properties or members in prototype objects, so how is this sharing mechanism implemented in js?

This has to mention the search principle of attributes.

Whenever the code reads a property of an instance object, it performs a search for a property or member with a given name

The search process is as follows:

1. Start the search from the object instance itself

two。 If a property with the given name is found in the instance object, the value of the property is returned

3. If it is not found, continue to search for the prototype object pointed to by the pointer contained in the instance object (mentioned above), and find the property with the given name in the prototype object

4. If this property is found in the prototype object, the value of the property is returned

When instance.sayName () is executed, two searches are performed, the first for the instance object and the second for the prototype object

After reading the above, do you have any further understanding of JavaScript prototypes and case analysis? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.