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

This article focuses on "what is the prototype in JavaScript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the prototype in JavaScript"?

JavaScript is a dynamic language, and you can add properties to objects at any time, as follows

Function Student () {this.name = 'LeBron James'; this.gender =' Male';} var studObj1 = new Student (); studObj1.age = 15; alert (studObj1.age); / / 15 var studObj2 = new Student (); alert (studObj2.age); / / undefined

As in the example above, the age property is attached to the studObj1 instance. However, the studObj2 instance does not have this property because the age property is only defined on the studObj1 instance.

So, what if you want to add an attribute later that can be shared by all instances? The answer is today's protagonist Prototype.

Prototype is an object, which is related to any function or object in JavaScript by default, except that the prototype property of the function is accessible and modifiable, while the prototype property of the object is not visible.

By default, any function contains a Prototype object, as shown in the following figure:

The prototype object is a special type of enumerable object to which additional attributes can be added, and these properties will be shared among all instances of its constructor.

I am a veteran web front-end programmer who has been engaged in development for many years. I am currently resigning from my job to do my own web front-end private customized courses. At the beginning of this year, I spent a month sorting out a piece of practical information about web front-end learning that is most suitable for 2019 study. All kinds of frameworks are sorted out and sent to every front-end partner.

Therefore, use the prototype of the function in the above example to add properties so that they can be accessed in all objects, as follows:

Function Student () {this.name = 'LeBron James'; this.gender =' alert;} Student.prototype.age = 15; var studObj1 = new Student (); alert (studObj1.age); / / 15 var studObj2 = new Student (); alert (studObj2.age); / / 15

Every object created using a literal quantity or through the new keyword and constructor contains a _ _ proto__ property that points to the prototype object of the function that created the object.

You can view this attribute (_ _ proto__) in Google and Firefox developer debugging tools, according to the following example:

Function Student () {this.name = 'LeBron James'; this.gender =' studObj.__proto__;} var studObj = new Student (); console.log (Student.prototype); / / object console.log (studObj.prototype); / / undefined console.log (studObj.__proto__); / / object console.log (typeof Student.prototype); / / object console.log (typeof studObj.__proto__); / / object console.log (Student.prototype = studObj.__proto__) / / true

As you can see in the above example, the function accesses the prototype object through [function name] .prototype. However, the object (instance) does not expose the prototype property, but uses _ _ proto__ to access it.

Prototype of Object object

As mentioned earlier, prototype objects are not visible in objects. Use the Object.getPrototypeOf (obj) method to access the prototype object of the instance. This is also recommended. _ _ proto__ is not a standard attribute and is not implemented in other browsers below IE11.

Function Student () {this.name = 'LeBron James'; this.gender =' var proto;} var studObj = new Student (); Student.prototype.sayHi= function () {alert ("Hi");}; var studObj1 = new Student (); var proto = Object.getPrototypeOf (studObj1); / / returns Student's prototype object alert (proto.constructor); / / returns Student function

The Object prototype object contains the following properties and methods

Property description constructor returns the constructor that created the instance _ _ proto__ points to the prototype object of the constructor that created the instance. The method description hasOwnProperty () returns a Boolean value indicating whether the object contains the specified property as a direct property of the object, rather than inheriting through the prototype chain. IsPrototypeOf () returns a Boolean value indicating whether the specified object is in the prototype chain of the object that called this method. PropertyIsEnumerable () returns a Boolean value indicating whether the specified property can be enumerated. ToLocaleString () returns a string in local format .toString () returns the object string form .valueof () returns the original value of the specified object.

Chrome and Firfox represent the prototype of the object as _ _ proto__, and internally refer to [[Prototype]]. IE does not support it, only IE11 contains it.

Modify the prototype

As mentioned above, each object can be linked to the prototype object of the function. If you change the prototype of the function, only the new object will be linked to the changed prototype. All other existing objects are still linked to the old function prototype. The following example demonstrates this scenario:

Function Student () {this.name = 'LeBron James'; this.gender =' new Student;} Student.prototype.age = 15; var studObj1 = new Student (); alert ('studObj1.age =' + studObj1.age); / / 15 var studObj2 = new Student (); alert ('studObj2.age =' + studObj2.age); / / 15 Student.prototype = {age: 20}; var studObj3 = new Student (); alert ('studObj3.age =' + studObj3.age) / / 20 alert ('studObj1.age =' + studObj1.age); / 15 alert ('studObj2.age =' + studObj2.age); / / 15

Use prototype

Prototype objects are used by the JavaScript engine to do two things:

Find the properties and methods of the object to implement inheritance in JavaScript

Function Student () {this.name = 'LeBron James'; this.gender =' Hi;} Student.prototype.sayHi = function () {alert ("Hi");}; var studObj = new Student (); studObj.toString ()

In the above example, the toString () method is not defined in Student, so how and where did it find toString ()?

Here, the prototype appears. First, the JavaScript engine checks studObj to see if there is a toString method?. If not, it uses studObj's _ _ proto__ link to point to the prototype object of the Student function. If it still can't find it, it will go up and check the prototype object of the Object function, because all objects are derived from Object in JavaScript and look for the toString () method. Therefore, it finds the toString () method in the prototype object of the Object function, so we can call studObj.toString ().

Search method, as shown in the following figure

At this point, I believe you have a deeper understanding of "what is the prototype in JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.