JavaScript prototype chain Learning (a) prototype object

Each function created in JavaScript has a prototype (prototype) attribute, which is a pointer to an object that is used to contain properties and methods that can be shared by all instances of a particular type. If it is understood literally, then prototype is the prototype object that creates that instance by invoking the constructor. The advantage of using a prototype object is that you can have all object instances share the properties and methods that it contains . In other words, instead of defining the information for an object instance in the constructor, you can add that information directly to the prototype object, as in the following example:

functionPerson () {}person.prototype.name= "Nicholas"; Person.prototype.age= 29; Person.prototype.job= "Software Engineer"; Person.prototype.sayName=function() {alert ( This, name);};varPerson1 =NewPerson ();p erson1.sayname (); //"Nicholas"varPerson2 =NewPerson ();p erson2.sayname (); //"Nicholas"Alert (Person1.sayname= = Person2.sayname);//true

In this example, the Sayname () method and all properties are added directly to the prototype property of the person, and the constructor becomes an empty function. Even so, you can still create new objects by calling the constructor, and the new objects will also have the same properties and methods, and these properties and methods are shared by all instances. In other words, Person1 and Person2 access both the same set of properties and the same sayname () function.

The nature of the prototype object

Whenever a new function is created, a prototype property is created for the function based on a specific set of rules, which points to the prototype object of the function . By default, all prototype objects automatically get a constructor (constructor) property , which is a pointer to the function where the prototype property is located . Taking the previous example, Person.prototype.constructor points to person. With this constructor, we can continue to add additional properties and methods to the prototype object.

Once a custom constructor has been created, its prototype object will only get the constructor property by default, and the other methods are inherited from object. When the constructor is called to create a new instance, the inside of the instance contains a pointer (inner property) to the prototype object of the constructor. ECMA-262 the 5th edition of this pointer is called [ [Prototype]]. Although there is no standard way to access [[Prototype] in scripts, Firefox, Safari, and chome support a property __proto__ on each object, and in other implementations, this property is completely invisible to the script. However, it is really important to be clear that this connection exists between the instance and the constructor's prototype object , not between the instance and the constructor.

An example of the person constructor used in the previous example and the code for creating an instance of Person.prototype shows the relationship between the objects.

Shows the relationship between the person constructor ,the prototype property of the person, and the two instances that the person has existing. Here,Person.prototype points to the prototype object , and Person.prototype.constructor refers back to theperson. In addition to containing the constructor property, the prototype object includes additional properties that were added later. Each instance of person--person1 and Person2 contains an internal property that points only to Person.prototype; They have no direct relation to the constructor function . In addition, it is important to note that although none of the two instances contain properties and methods, we can call Person1.sayname (). This is accomplished by looking up the properties of the object.

although [[Prototype]] is inaccessible in all implementations, the isPrototypeOf () method can be used to determine whether the relationship exists between objects. Essentially, if [[Prototype]] points to an object that calls the isPrototypeOf () method (Person.prototype), then this method returns True as follows:

Alert (Person.prototype.isPrototypeOf (Person1));  //truealert (Person.prototype.isPrototypeOf (Person2));  //true

Here, Person1 and Person2 are tested using the isprototypeof () method of the prototype object. Because they have a pointer to person.prototype inside, they all return true.

each time the code reads a property of an object, the search is performed once, and the target is a property with the given name. The search begins first from the object instance itself . If a property with the given name is found in the instance, the value of the property is returned, and if it is not found, the prototype object that the pointer points to is searched, and the property with the given name is looked up in the prototype object. If this property is found in the prototype object, the value of the property is returned. In other words, when we call Person1.sayname (), we perform two searches successively . First, the parser asks: "Does the instance Person1 have a sayname attribute?" A: "No." Then it went on searching and asked, "Does the Person1 prototype have a sayname attribute?" Answer: "Yes." So it reads the function that is stored in the prototype object. When we call Person2.sayname (), we will reproduce the same search process and get the same results. This is where multiple object instances share the fundamentals of the properties and methods saved by the prototype.

Although the values saved in the prototype can be accessed through an object instance, the values in the prototype cannot be overridden through an object instance. If we add a property to the instance with the same name as an attribute in the instance prototype, we create the property in the instance that will mask that property in the prototype.

JavaScript prototype chain Learning (a) prototype object