Understand JS's prototype prototype object

Each function we create has a prototype (prototype) attribute, which is a pointer to an object, and the purpose of this object is to include 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 of the object instance created by invoking the constructor. The advantage of using the original 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 shown in the following example.

    function person () {}    Person.prototype.name = ' mychirs ';    Person.prototype.age =;    Person.prototype.job = ' software Engineer ';    Person.prototype.sayName = function () {      alert (this.name);    };    var person1 = new Person ();    Person1.sayname ();//' Mychirs '    var person2 = new Person ();    Person2.sayname ();//' Mychirs '    alert (person1.sayname = = person2.sayname);//true

Here, we add the Sayname () method and all properties 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 have the same properties and methods. However, unlike the constructor pattern, these properties and methods of the new object are shared by all instances. In other words Both personl and Person2 access the same set of properties and the same sayname () function. To understand the T-making principle of prototype pattern, we must first understand the nature of the prototype object of ECMAScript towel.

Understanding prototype Objects

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 that contains a pointer to the function where the Prot Otype property is located. Take the previous example, Person.prototype. constructor 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 the obj ect. When the constructor is called to create a new instance, the inside of the instance contains a pointer (internal property) that points to the constructor's prototype object. 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 chrome support an attribute-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.
As an example of the code that previously used the person constructor and the Person.prototype to create an instance, figure 6-1 shows the relationship between the individual objects.

Shows the relationship between the RR person constructor, the prototype property of the person, and the two instances that the person has existing. Here, the person *prototype points to the prototype object, and the Person.prototype.constructor Fork refers back to the person. In addition to containing the Cons t,ruct or property, the prototype object includes additional properties that were added later. Each instance of person personl and Person2 contains an internal property that points only to Person.prot otype; in other words, they are not directly related to constructors. In addition, it is important to note that although none of the two instances contain properties and methods, we can call Personl.sayname (). This is accomplished by looking up the properties of the object.
Although [[Prototype]: cannot be accessed in all implementations, the Isprocotypeof () 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 (personl));//truealert (Person.prototype.isPrototypeOf (Person2));//true

Here, we tested Personl and Person2 0 with the isprototypeof () method of the prototype object because they have a pointer to the person.prototype inside, so they all return true.

ECMAScript 5 Adds a new method called Object.getprototypeof (), which returns the value of [[Prototypej]] in all supported implementations. For example:

Alert (Object.get prototypeof (personl) = = Person.prototype);//truealert (Object.get prototypeof (personl). name);//' Nicholas '

The first line of code here just determines that the object returned by Object.getprototypeof () is actually the object's prototype. The second line of code gets the value of the name attribute in the prototype object, which is ' Nicholas '. Using object.getprototypeof () makes it easy to get a prototype of an object, which is important in the case of using a prototype to implement inheritance (discussed later in this chapter). Browsers that support this approach are ie9+, Firefox 3.5+, Safari 5+, Opera 12+, and Chrome.
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. That is, before we call personl. Sayname "), will perform two searches successively. First, the parser together: "Instance personl have sayname properties?" "Answer:" No. "Then, it continues the search," asked again: "Personl's original ba have Sayname attribute?" "A:" 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.

Understand JS's prototype prototype object