Understanding prototype objects in js

Understanding prototype objects in js

Each function we create has a prototype attribute, which is a pointer pointing to an object, the purpose of this object is to include attributes and methods that can be shared by all instances of a specific type. If it is understood literally, prototype is the prototype of the object instance created by calling the constructor. The advantage of using the original object is that all object instances can share its attributes and methods. In other words, you do not need to define the information of the object instance in the constructor. Instead, you can add the information directly to the prototype object, as shown in the following example.

    function Person(){}    Person.prototype.name = 'mychirs';    Person.prototype.age = 29;    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 attributes directly to the prototype attribute of Person, and the constructor becomes an empty function. Even so, you can still create an object by calling the constructor, and the new object will have the same attributes and methods. However, unlike the constructor mode, these attributes and methods of the new object are shared by all instances. In other words, personl and person2 access the same group of attributes and the same sayName () function. To understand the T-working principle of the prototype, you must first understand the nature of the ECMAScript prototype object.

Understanding prototype objects

Whenever a new function is created, a prototype attribute is created for the function according to a set of specific rules. This attribute points to the prototype object of the function. By default, all prototype objects will automatically obtain a constructor (constructor) attribute, which contains a pointer to the function of the prot otype attribute. Taking the previous example as an example, Person. prototype. constructor is directed to Person. With this constructor, we can continue to add other attributes and methods for the prototype object.
After a custom constructor is created, its prototype object only obtains the constructor attribute by default. Other methods are inherited from Obj ect. After a constructor is called to create a new instance, the instance contains a pointer (internal attribute) pointing to the constructor's prototype object. In ECMA-262 5th, this pointer is called [Prototype]. Although there is no standard way to access [Prototype] in the script, Firefox, Safari, and Chrome support a property-proto _ on each object. In other implementations, this attribute is completely invisible to the script. However, it should be clear that this connection exists between the instance and the prototype object of the constructor, rather than between the instance and the constructor.
The previous example shows how to use the Person constructor and the Person. prototype code to create an instance. Figure 6-1 shows the relationship between objects.

Shows the rr Person constructor, the prototype property of Person, and the relationship between two existing instances of Person. Here, Person * prototype points to the prototype object, while Person. prototype. constructor refers to the Person. In addition to the cons t, ruct or attributes, the prototype object also contains other attributes that are added later. Each personl and person2 instance of Person contains an internal attribute that only points to Person. prot otype. In other words, they have no direct relationship with constructors. In addition, although neither of the two instances contains attributes or methods, we can call personl. sayName (). This is achieved through the process of searching for object attributes.
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 the object [Person. prototype) that calls the isPrototypeOf () method, this method returns true, as shown below:

alert(Person.prototype.isPrototypeOf(personl));//truealert(Person.prototype.isPrototypeOf(person2));//true

Here, we use the isPrototypeOf () method of the prototype object to test the personl and person2 0. because both of them have internal pointers to Person. prototype, true is returned.

ECMAScript 5 adds a new method called Object. getPrototypeOf (). In all supported implementations, this method returns the value of [[PrototypeJ. For example:

alert(Object.get PrototypeOf(personl) == Person.prototype);//truealert(Object.get PrototypeOf(personl).name );//'Nicholas'

The first line of code here only determines that the Object returned by Object. getPrototypeOf () is actually the prototype of this Object. The second line of code gets the value of the name attribute in the prototype object, that is, the value of 'clairs '. You can use Object. getPrototypeOf () to easily obtain the prototype of an Object, which is very important when prototype inheritance is used (this chapter will discuss later. Browsers that support this method include IE9 +, Firefox 3.5 +, Safari 5 +, Opera 12 +, and Chrome.
Each time the Code reads an attribute of an object, a search is executed, and the target is an attribute with a given name. Search starts with the object instance itself. If a property with a given name is found in the instance, the value of the property is returned. If no property is found, the search continues for the prototype object pointed to by the pointer, search for attributes with a given name in the prototype object. If this attribute is found in the prototype object, the value of this attribute is returned. That is to say, when we call personl. sayName "), we will perform two searches successively. First, the parser works with: "Does the instance personl have the sayName attribute ?" A: "No ." Then, it continues searching and asks, "Does the original secret of personl have the sayName attribute ?" A: "Yes ." Therefore, it reads the function stored in the prototype object. When we call person2.sayName (), we will reproduce the same search process and get the same results. This is the basic principle of attributes and methods stored by Multiple object instances sharing prototype.