Test JS prototype chain and OO Simulation

Prototype is a design pattern, but it can also be used to design inheritance. Prototype has its own simplicity and can simulate forward object functions, but it is inferior in designing complicated inheritance layers. To implement complex object-oriented models in JS, you need to do a lot of work on your own. First Study and check... SyntaxHighlighter. all ();

 

Prototype is a design mode, but it can also be used to design inheritance. It has its own simplicity and can simulate forward object functions.

Complex inheritance layers are poor.

To implement complex object-oriented models in JS, you need to do a lot of work on your own. First, study and test the prototype chain and constructor of JS, in principle, constructor and class are optional.

 

1. Define a class

/**

* Define a constructor Plane. In this case, Plane's prototype points to an Object constructed by an Object, and a constructor attribute refers to Plane.

* When this constructor is executed together with new, it will pass in a clean Object constructed by Object as this. Of course there are other parameters before the code is actually executed.

* We have already introduced the prototype of the constructor to associate the new objects, and then execute the code in the constructor. Generally, we initialize the data without placing the method.

* @ Param x

* @ Param y

*/

 

Var Plane = function (x, y ){

// Check whether the prototype is set to true

Alert (this. _ proto _ = Plane. prototype );

This. x = x;

This. y = y;

};

 

// Static field

Plane. STATIC_FIELD = 2;

 

// Static method

Plane. staticFunction = function (){

Alert (Plane. STATIC_FIELD );

}

 

// Check whether the constructor of prototype on the constructor is equal to the constructor true.

Alert (Plane. prototype. constructor = Plane );

 

/**

* Set a method on the prototype so that each instance shares these methods.

*/

Plane. prototype. XY = function (){

Alert (this. x * this. y );

};

 

// Instantiate the object

Var planeObject = new Plane (2, 3 );

 

// The prototype chain on the Object's protype is null. true

Alert (Object. prototype. _ proto _ = null );

 

// Check whether the prototype of the Object on the constructor is true on the prototype of the Object.

Alert (Plane. prototype. _ proto _ = Object. prototype );

 

// Check whether the prototype of the instance object is the prototype of the constructor. true

Alert (planeObject. _ proto _ = Plane. prototype );

 

PlaneObject. XY ();

Plane. staticFunction ();

2. inherit this class

/**

* If the inheritance structure is to be implemented, the constants of the superclass need to be maintained. In JS, if only the Object is inherited, no maintenance is required because the Object has no attribute. Of course, except the constructor

* Java objects have only methods and no attributes.

* If we want to inherit from Plane, we need to call the superclass constructor to construct the superclass when constructing the object.

* Above, we can think that Plane is a subclass of objects. The feature is that Plane's prototype is constructed by Object. To make a class a subclass of Plane, prototype of the new class also needs to be constructed by Plane.

* The problem is that the object _ proto _ constructed from Plane must point to Plane. prototype, but some initial data of Plane may be set on the object, but we only want to inherit the behavior, so there are two methods:

* 1. manually delete

* 2. We use a clean function for grafting. Our ultimate goal is to have a new object whose _ proto _ points to the prototype of Plane. Its constructor points to the new constructor, of course we hope

The prototype of Plane is directly set on _ proto _, but js is not allowed. Therefore, to construct a function, the first method will leave junk data, the second step is used to extract the prototype of Plane and put it on a clean function.

Construct an object, and then set constructor for the constructed object. This is also Ext's practice.

*/

 

Var Space = function (x, y, z ){

// Use this to call the superclass Constructor

Plane. call (this, x, y );

// This. super (x, y );

 

This. z = z;

};

 

 

/**

* To make Space inherit from Plane, we need to make the prototype of Space be a Plane instance. Now we are manually setting the prototype, which was originally done by the JS engine.

*

*/

Space. prototype = new Plane ();

 

// Place an unchanged property on the prototype of the subclass to point to the superclass. If this method is inherited more than twice, when this. super goes to the superclass constructor, because this. super always points to this superclass, so it will be infinitely recursive

Space. prototype. super = Plane;

 

/**

* We only want to inherit methods and constants, so we need to delete the data fields of the superclass, although the values of those fields are undefined.

*/

 

Alert (Space. prototype. x); // undefined

 

Delete Space. prototype. x;

 

Delete Space. prototype. y;

 

 

/**

* In addition to an object, the prototype also has a constructor pointing to its function. Therefore, you must set this value.

*/

Space. prototype. constructor = Space;

 

/**

* Child classes override parent classes for decoration

*/

Space. prototype. XY = function (){

Alert ("Before Invoke Super Method ");

Plane. prototype. XY. call (this );

 

}

 

Space. prototype. XYZ = function (){

Alert (this. x * this. y * this. z );

}

 

Var spaceObject = new Space (2, 3, 4 );

 

// Call the override method

SpaceObject. XY ();

 

// Call your own Method

SpaceObject. XYZ ();

3. Use clean functions for grafting to implement prototype inheritance

// A clean function for grafting, the second method

Var F = function (){

}

// Graft

F. prototype = Plane. prototype;

Space. prototype = new F ();

 

From Adley