Prototypes and prototype chains in JavaScript

has been not understanding of the prototype and inheritance of JavaScript, referring to the JavaScript authoritative guide (sixth edition) and the JavaScript Advanced Programming (third Edition) of the knowledge of this point to do a tidy, convenient for their own memory. Most of the following are excerpted from the two books

Each JavaScript object has a prototype object (prototype) associated with it.

What is the use of prototype objects?

JavaScript objects inherit the properties of the prototype object.

Where did the prototype object come from?

First, let's look at the basic ways to create objects:

// 1, Object Direct Volume var a={},b={m:1}//2, constructor var c=New Object (), d=new Date (); // 3,object.create (param); var x=object.create (d);

1. Objects created using the object's direct volume use Object.prototype as their prototype object;

2. Objects created by new are constructed with the prototype property of the constructor as the prototype object ;

3. Objects created by object.create () use the first parameter as their prototype object;

Description: Any function can be a constructor, such as a function f, when using Var f=new f () to create an object, F is the constructor of the object F, and in other cases f is a normal function

How does the prototype property of Object.prototype and constructors come in addition to the prototype of an object created by Object.create (), which is our own designation?

1.object.prototype is a JavaScript built-in prototype object that defines methods such as tostring,valueof and some properties. When we created object A through Var a={}, although we did not define the ToString method for a, we would return "[Object Object]" When we called A.tostring (). This is because this method has been defined in Object.prototype.


2. When we create a function, JavaScript creates a prototype property for the function. Please look at the code:

function F () {}console.info (f.prototype); // {constructor:?} Console.info (F.PROTOTYPE.CONSTRUCTOR===F); // true

What is the prototype chain?

First look at the exceptions to the JavaScript object prototypes, where there are few objects that have no prototype objects in JavaScript.

1.object.prototype

2.null

3. Objects created by object.create (null);

In addition to the above objects, all JavaScript objects have a prototype object by default. The prototype object is also an object instance, and if it does not belong to the above 3 class object, it also has its own prototype object. For example, A's prototype object is B,b's prototype object is C,c's prototype object is D ... Until you encounter the above 3 classes of objects without prototype objects, thus in a,b,c,d ... Formed a chain, a-->b-->c-->d ..., this is the prototype chain.

What is the use of the prototype chain?

When looking for a property in a, if there is a return property value, if not go to B to find, there is the return attribute value; If you do not go to C to find ..., if you find the end of the chain, you can not find the return undefined. Through the prototype chain, the object's inheritance to the object on the prototype chain is realized.

Description: Properties that are in the front of the prototype chain hide properties with the same name as later objects. For example: The lookup attribute x,b and C have attribute x,a.x values equal to b.x, and the x in C is hidden.

Extending the prototype chain

The constructor has a default prototype object, and the prototype object is Object.prototype. So, creating an object with the new constructor will only have three objects on the prototype chain, how do you extend the prototype chain? Please look at the code:

 //This code comes from "Advanced JavaScript Programming (third edition)" 163 pages
functionsupertype () { This. property =true;} SuperType.prototype.getSuperValue=function() {return  This. property;};functionsubtype () { This. Subproperty =false;}//inherited the supertype.Subtype.prototype = new supertype ();
SubType.prototype.getSubValue=function (){return  This. Subproperty;};varInstance =Newsubtype (); alert (Instance.getsupervalue ());//true

Red code, we have modified the prototype property of the subtype function to point to an object instance of Supertype. This is when we create the object instance through new subtype (), the instance prototype object is the Supertype instance, The prototype object of the Supertype instance is Supertype.prototype,supertype.prototype's prototype object is Object.prototype. This allows us to extend the prototype chain of the object instance. In turn, we can also set the Supertype.prototype to another object instance and extend the prototype chain again. And so on, we can extend the prototype chain indefinitely.

As you can see through the prototype chain, you can implement simple inheritance in JavaScript: An object inherits the properties of an object on its own prototype chain. For further knowledge of inheritance see the section "Advanced Programming in JavaScript (third edition)", 6.3 inheritance, which is detailed.

The above is the simplest summary of JavaScript prototypes. Please criticize the heroes of the road.

Prototypes and prototype chains in JavaScript