JavaScript prototype chain

On JS prototype chain

Prototype chain

The concept of the prototype chain is described in ECMAScript. We know that ECMAScript does not use classes like C++,java, but objects can still be created in many ways, including constructors. Each constructor has a prototype object with a prototype property, and the prototype property points to the constructor's prototype object, which is used to implement prototype-based inheritance and sharing. The prototype object, by default, gets a constructor property that contains a pointer to the constructor (the function where the prototype property resides). Each instance object created by calling the constructor has a pointer to the prototype object, which is called [[prototype]] in ECMA-262 version 5th, although there is no standard way to access [[prototype] on a script, but Chrome, Firefox and Safari support one property _proto_ on each object, and in other implementations, this property is completely invisible to the script. If the prototype object equals an instance of another type, it has a pointer to the prototype object that created the constructor for the instance, and so on, forming a pointer chain, which is the concept of the prototype chain. We can understand the concept of prototype chain more clearly through the following graphs.

ECMA5 can use Object.getprototypeof () to get the prototype of the instance's constructor

In fact, the prototype chain shown is less than one link. We know that all reference types inherit object by default, and this inheritance is implemented through the prototype chain. The function is a callable object, and the default prototype object for all functions is an instance of object, so the prototype object of the function will contain a pointer to the prototype object of the object constructor, which is the pointer to Object.prototype [[prototype]]. This explains why all custom object types inherit the default method for object prototype objects such as toLocaleString (), toString (), and so on. Let's do it.

Of course, it is also important to note that the pointer [[prototype]] in the object instance only points to the prototype object and does not point to the constructor.

Prototype syntax

In general, we can rewrite an entire prototype object with an object literal that contains all the properties and methods. For example

1	functionPerson(){}

2	Person.prototype = {

3	name: "bella",

4

age: 21,

5	sayHello: function(){

6	alert(this.name);

7

}

8

}

However, we need to note that after rewriting, the constructor property of the constructor person's prototype object no longer points to person, because the essence of the syntax is to completely rewrite the default prototype object, So the constructor property becomes the constructor property of the new object, pointing to the object constructor, and we cannot determine the type of the object by Constuctor at this point.

You can recover the constructor pointer by Person.prototype.constructor = person.

The dynamic nature of prototypes

The prototype is a search for a value, and when we want to refer to a property of an object, we refer to the property value corresponding to the first object in the prototype chain that contains the property name. In other words, an object that directly references this property will be queried first whether it contains the property name, if it is included, the value of the property is what we want to get, the query is stopped, if it is not included, the object's prototype is queried to include the property, and so on.

We can dynamically add properties and methods to our prototypes at any time, and, based on this search process, any modifications we make to the prototype object can be seen immediately from the object instance, even after the instance is created. But it is another matter to rewrite the entire prototype object with the syntax mentioned above. Because overriding the prototype object will cut off the connection between the existing prototype object and any object instances that already exist, and they contain pointers [[prototype]] that still point to the original prototype object, we can look at the following small example.

01	functionPerson(){}

02	varperson1 = newPerson();

03	Person.prototype = {

04	name: "bella",

05

age: 21,

06	sayHello: function(){

07	alert(this.name);

08

}

09

}

10	person1.sayHello();  //error

In the example above, we first create an instance object of person Person1, then rewrite the prototype object of person, and then call Person1.sayhello () and then an error occurs. Because the pointer contained in Person1 [[prototype]] still points to the original prototype object, it does not contain the SayHello attribute defined in the new prototype object.

The problem with the prototype

The prototype pattern allows all object instances to get the same property value by default, and for the case where the property value is a function, that's what we want to see, all object instances share this function without repeating the definition, but for the case where the value of the property is basic, we usually want different object instances to have different base values, but , we can hide the properties in the prototype object by adding the same name property on the object instance. However, if a property that contains a reference type value is included, the problem is apparent.

01	functionPerson(){}

02	Person.prototype = {

03	name: "bella",

04

age: 21,

05	classmates: ["Lucy", "Lily"],

06	sayHello: function(){

07	alert(this.name);

08

}

09

}

10	varperson1 = newPerson();

11	varperson2 = newPerson();

12	person1.classmates.push("Mark");

13	alert(person1.classmates === person2.classmates);  //true

Here, we add the classmates property for the Person.prototype object, the value is an array of strings, and then we create two object instances Person1, Person2. Due to Person1, The classmates property owned by Person2 is actually the classmates property of the shared prototype object Person.prototype, that is, the array exists only in the Person.prototype object, Person1 and Person2 refer to the same number of groups, p Changes to classmates in Erson1 are also reflected in person2.classmates, which causes all object instances to share an array, which is often not what we want.

Above, I simply analyzed the prototype chain concept and the basic characteristics of the prototype object, I hope to have a little help, want to know it more deeply, of course, we have to rely on the actual project to learn

Original address:

http://cube.qq.com/?p=163

JavaScript prototype chain