Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "what is the concept of JavaScript prototype". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Cognitive prototype

Before we begin the introduction of the prototype, let's first understand what a prototype is.

In JavaScript, the prototype is also an object, and the property inheritance of the object can be realized through the prototype. The object of JavaScript contains an internal attribute of "[[Prototype]]", which corresponds to the prototype of the object.

"[[Prototype]]", as an internal property of an object, cannot be accessed directly. So to make it easy to see an object's prototype, Firefox and Chrome provide "_ _ proto__", a non-standard (not supported by all browsers) accessor (ECMA introduces the standard object prototype accessor "Object.getPrototype (object)").

Case analysis

Let's take a look at prototype-related concepts through an example:

Function Person (name, age) {this.name = name; this.age = age; this.getInfo = function () {console.log (this.name + "is" + this.age + "years old");};} var will = new Person ("Will", 28)

In the above code, a will object is created through the constructor Person. Let's learn about the prototype step by step through the object will.

Step 1: view the prototype of the object will

You can view the prototype of the object will with the following code:

Console.log (will.__proto__); console.log (will.constructor)

Result analysis:

The "Person {}" object is the prototype of the object will. As you can see from the Chrome expansion, "Person {}" as a prototype object also has the "_ _ proto__" attribute (the prototype corresponding to the prototype).

The "constructor" attribute is also used in this code. In the prototype object of JavaScript, there is also a "constructor" property that corresponds to the constructor that creates all instances that point to the prototype.

Through the attribute "constructor", we can determine whether an object is an array type.

Function isArray (myArray) {

Return myArray.constructor.toString () .indexOf ("Array") >-1

}

Here, the will object itself does not have the attribute "constructor", but through the prototype chain search, the "constructor" attribute of the will will.__proto__ is found and the Person function is obtained.

Step 2: view the prototype of the object will prototype (will.__proto__)

Since the will prototype "Person {}" is also an object, we can also look at the "will prototype (will.__proto__) prototype".

Run the following code:

Console.log (will.__proto__ = Person.prototype); console.log (Person.prototype.__proto__); console.log (Person.prototype.constructor); console.log (Person.prototype.constructor = Person)

Result analysis:

First look at "will.__proto__ = = Person.prototype". In JavaScript, each function has a prototype property. When a function is used as a constructor to create an instance, the value of the prototype attribute of the function will be assigned to all object instances as a prototype (that is, set the _ _ proto__ property of the instance), that is, the prototype of all instances refers to the prototype property of the function. Once you understand the prototype property of the constructor, you must understand why the * * sentence turns out to be true.

The prototype property is unique to a function object, and if it is not a function object, there will be no such property.

When you get the prototype of the will object prototype through the "Person.prototype.__proto__" statement, you will get the "Object {}" object, and you will see that the prototypes of all objects will be traced back to the "Object {}" object.

For the "constructor" of the prototype object "Person.prototype", according to the previous introduction, it corresponds to the Person function itself.

As you can see above, the "Person.prototype" object and the Person function object reference each other through the "constructor" and "prototype" properties (a figure shows this cross-referencing relationship later).

Step 3: view the prototype of the object Object

As you can see from the previous section, the prototype of will is the "Object {}" object. In fact, in JavaScript, the prototypes of all objects are traced back to the "Object {}" object.

Let's look at the "Object {}" object through a piece of code:

Console.log (Person.prototype.__proto__ = Object.prototype); console.log (typeof Object); console.log (Object); console.log (Object.prototype); console.log (Object.prototype.__proto__); console.log (Object.prototype.constructor)

You can see this in the following code:

The Object object itself is a function object.

Since it is an Object function, there must be a prototype property, so you can see that the value of "Object.prototype" is the prototype object "Object {}".

Conversely, when you access the "constructor" property of the "Object.prototype" object, you get the Obejct function.

In addition, when you get the prototype of the Object prototype through "Object.prototype.__proto__", you will get "null", that is, the "Object {}" prototype object is the end of the prototype chain.

Step 4: view the prototype of the object Function

In the above example, Person is a constructor, and in JavaScript a function is also an object, so we can also find the prototype of the Person function object through the "_ _ proto__" property.

Console.log (Person.__proto__ = Function.prototype); console.log (Person.constructor = Function) console.log (typeof Function); console.log (Function); console.log (Function.prototype); console.log (Function.prototype.__proto__); console.log (Function.prototype.constructor)

Result analysis:

In JavaScript there is a Function object (similar to Object), which itself is a function; the prototype (_ _ proto__) of all functions (including Function,Object) is "Function.prototype".

As a function, the Function object has a prototype property, which corresponds to the "function () {}" object.

As an object, the Function object has the attribute "_ _ proto__", which corresponds to "Function.prototype", that is, "Function.__proto__ = Function.prototype"

For Function's prototype object "Function.prototype", the "_ _ proto__" property of the prototype object will correspond to "Object {}"

Compare prototype with _ _ proto__

The two attributes "prototype" and "_ _ proto__" may sometimes be confused. "Person.prototype" and "Person.__proto__" are completely different.

Here is a brief introduction to "prototype" and "_ _ proto__":

For all objects, there is a _ _ proto__ property, which corresponds to the prototype of the corresponding object

For function objects, in addition to the _ _ proto__ attribute, there is also a prototype property. When a function is used as a constructor to create an instance, the prototype attribute value of the function is assigned to all object instances as a prototype (that is, set the _ _ proto__ property of the instance)

Illustration example

Through the analysis of the above combined with examples, I believe you must know a lot about the prototype.

But now I must feel messy about the relationship in the above example, the prototype, the prototype, the Function,Object,constructor,prototype, and so on.

Now to illustrate the results / relationships analyzed in the above example, I believe this picture will enlighten you suddenly.

The summary of the above figure is as follows:

All objects have a "_ _ proto__" property, which corresponds to the prototype of the corresponding object

All function objects have a "prototype" attribute, whose value is assigned to the "_ _ proto__" property of the object created by the function.

All prototype objects have a "constructor" property, which corresponds to the constructor that creates all instances pointing to the prototype

Function objects and prototype objects are related to each other through "prototype" and "constructor" properties

Improve the example through the prototype

In the above example, the "getInfo" method is a member of the constructor Person, and when two instances are constructed through Person, each instance contains a "getInfo" method.

Var will = new Person ("Will", 28)

Var wilber = new Person ("Wilber", 27)

As you learned earlier, the getInfo is to facilitate property inheritance, so you can treat the "getInfo" method as a property of the Person prototype (Person.__proto__), so that all instances can use the "getInfo" method through prototype inheritance.

So make the following changes to the example:

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.getInfo = function () {console.log (this.name + "is" + this.age + "years old");}

Prototype chain

Because every object and prototype has a prototype, the prototype of the object points to the parent of the object, and the prototype of the parent points to the parent. This prototype is connected layer by layer to form the prototype chain.

In the article "understanding the scope chain of JavaScript", we have introduced the lookup of identifiers and attributes through scope chain and prototype chain.

Let's move on to the property lookup based on the prototype chain.

Attribute lookup

When looking for a property of an object, JavaScript iterates up the prototype chain until it finds a property with a given name, until the lookup reaches the top of the prototype chain (that is, "Object.prototype"), and returns undefined if the specified property is still not found.

Look at an example:

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.MaxNumber = 9999; Person.__proto__.MinNumber =-9999; var will = new Person ("Will", 28); console.log (will.MaxNumber); / / 9999 console.log (will.MinNumber); / / undefined

In this example, the "MaxNumber" and "MinNumber" attributes are added to the "Person.prototype" and "Person.__proto__" prototype objects, respectively, so you need to figure out the difference between "prototype" and "_ _ proto__".

"Person.prototype" corresponds to the prototype of all the instances constructed by Person, that is, "Person.prototype" is part of the instance prototype chain, so when these instances do a property lookup, they refer to the properties in "Person.prototype".

Attribute hiding

When looking for an attribute through the prototype chain, the first thing to look for is the attribute of the object itself, and if it cannot be found, it will continue to follow the prototype chain.

In this way, if we want to override some attributes on the prototype chain, we can directly introduce these attributes into the object to achieve the effect of attribute hiding.

Look at a simple example:

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.getInfo = function () {console.log (this.name + "is" + this.age + "years old");}; var will = new Person ("Will", 28); will.getInfo = function () {console.log ("getInfo method from will instead of prototype"); will.getInfo (); / / getInfo method from will instead of prototype

How objects are created affects the prototype chain

Coming to the example at the beginning of this article, the will object is created by the Person constructor, so the will.__proto__ of will is "Person.prototype".

Similarly, we can create an object in the following ways:

Var July = {name: "July", age: 28, getInfo: function () {console.log (this.name + "is" + this.age + "years old");},} console.log (July.getInfo ())

When you create an object in this way, the prototype chain becomes the following figure. The prototype of the July object is "Object.prototype", which means that the way the object is constructed affects the form of the prototype chain.

HasOwnProperty

"hasOwnProperty" is a method of "Object.prototype" that determines whether an object contains custom properties rather than attributes on the prototype chain, because "hasOwnProperty" is a function in JavaScript that handles attributes but does not find the prototype chain.

Through will, we can access the property "constructor" and get the constructor Person of will. Combined with the function "hasOwnProperty" here, you can see that the will object does not have the attribute "constructor".

As you can see from the output below, "constructor" is a property of will's will.__proto__, but through the lookup of the prototype chain, the will object can discover and use the "constructor" attribute.

Another important usage scenario for "hasOwnProperty" is to traverse the properties of an object.

Function Person (name, age) {this.name = name; this.age = age;} Person.prototype.getInfo = function () {console.log (this.name + "is" + this.age + "years old");}; var will = new Person ("Will", 28); for (var attr in will) {console.log (attr) } / / name / / age / / getInfo for (var attr in will) {if (will.hasOwnProperty (attr)) {console.log (attr);} / / name / / age "what is the concept of JavaScript prototype", thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.