JavaScript prototype and prototype chain and Project Practice

1. Basic Concepts 1.1 prototype

Each function has a prototype attribute, which is a pointer pointing to an object. This object is used to share all the attributes and methods of this class.

 

No prototype is required:

// Decimal point, Tax Rate

Var decimalDigits = 2,

Tax = 5;

Function add (x, y ){

Return x + y;

}

Function subtract (x, y ){

Return x-y;

}

// Alert (add (1, 3 ));

 

 

Method 1:

Var Calculator = function (decimalDigits, tax ){

This. decimalDigits = decimalDigits;

This. tax = tax;

};

 

Calculator. prototype = {

Add: function (x, y ){

Return x + y;

},

 

Subtract: function (x, y ){

Return x-y;

}

};

// Alert (new Calculator (). add (1, 3 ));

 

Method 2:

 

Calculator. prototype = function (){}();

Calculator. prototype = function (){

Add = function (x, y ){

Return x + y;

},

 

Subtract = function (x, y ){

Return x-y;

}

Return {

Add: add,

Subtract: subtract

}

}();

 

// Alert (new Calculator (). add (11, 3 ));

 

 

Of course, we can also declare it step by step.

Var BaseCalculator = function (){

// Declare a decimal place for each instance

This. decimalDigits = 2;

};

// Use the prototype to extend two object methods for BaseCalculator

BaseCalculator. prototype. add = function (x, y ){

Return x + y;

};

 

BaseCalculator. prototype. subtract = function (x, y ){

Return x-y;

};

 

1.2 prototype chain

 

ECMAScript describes the concept of prototype chain and uses prototype chain as the main method to implement inheritance. The basic idea is to use the prototype to inherit the attributes and methods of another reference type. A brief review of the relationships between constructors, prototypes, and instances: Each constructor has a prototype object that contains a pointer to the constructor, actually, it contains an internal pointer pointing to the prototype object. So what if we set the prototype object to be equal to another type of instance? Obviously, the prototype object will contain a pointer to another prototype. Correspondingly, the other prototype also contains a pointer to another constructor. If another prototype is another type of instance, the above relationship is still established, so that the progressive layers constitute the chain between the instance and the prototype. This is the basic concept of prototype chain.

 

Function SuperType (){

This. property = true;

}

SuperType. prototype. getSuperValue = function (){

Return this. property;

};

Function SubType (){

This. subproperty = false;

}

SubType. prototype = newSuperType ();

SubType. prototype. getSubValue = function (){

Return this. subproperty;

};

Var instance = new SubType ();

Alert (instance. getSuperValue (); // true

 

2. Project Practice

In a road rescue project, each step of operations performed by the operator must be recorded in the case log table to allow the Administrator to clearly view the operation process of each step, to avoid repeated development, we need to make a case record tool JS: CaseLogUtil. js

 

 

 

Here, when we want to call this method, we can directly instantiate CaseLog and call its log method.

Example: var test = new CaseLog ("11", "content ");

Test. log ();