JavaScript advanced programming Reading Notes (14) Implementation of js Inheritance Mechanism _ javascript tips-js tutorial

Inheritance is an essential feature of object-oriented languages. That is, one class can reuse the methods and attributes of another class. In JavaScript, the inheritance methods include the following methods: Object impersonating, call (), apply (), prototype chain, and hybrid mode. Inheritance

Inheritance is an essential feature of object-oriented languages. That is, one class can reuse the methods and attributes of another class. In JavaScript, the inheritance methods include the following methods: Object impersonating, call (), apply (), prototype chain, and hybrid mode.

The following sections describe each other.

Object impersonating

Principle: constructors use the this keyword to assign values to all attributes and methods. Because the constructor is just a function, you can make the constructor of ClassA A ClassB method and then call it. ClassB receives the attributes and methods defined in the ClassA constructor.

Example:

The Code is as follows:

Function ClassA (sColor ){
This. color = sColor;
This. sayColor = function (){
Alert (this. color );
}
}

Function ClassB (sColor, sName ){
This. newMethod = ClassA;
This. newMethod (sColor );
Delete this. newMethod;

This. name = sName;
This. sayName = function (){
Alert (this. name );
}
}

Call:

The Code is as follows:

Var objb = new ClassB ("blue", "Test ");
Objb. sayColor ();//
Blueobjb. sayName (); // Test

Note: You must delete the reference to ClassA. Otherwise, defining new methods and attributes will overwrite the attributes and methods of the superclass. Multiple inheritance can be implemented in this way.

Call () method

Due to the popularity of object impersonating methods, two new call () and apply () methods are added to Function objects in the third edition of ECMAScript to implement similar functions.

The first parameter of the call () method is used as the object of this, and other parameters are passed directly to the function itself. Example:

The Code is as follows:

Function sayColor (sPrefix, sSuffix ){
Alert (sPrefix + this. color + sSuffix );
}

Var obj = new Object ();
Obj. color = "red ";

// Output The color is red, a very nice color indeed.
SayColor. call (obj, "The color is", ", a very nice color indeed .");

To use this method to implement inheritance, you only need to replace the values, calls, and deletion codes of the first three rows:

The Code is as follows:

Function ClassB (sColor, sName ){
// This. newMethod = ClassA;
// This. newMethod (sColor );
// Delete this. newMethod;
ClassA. call (this, sColor );

This. name = sName;
This. sayName = function (){
Alert (this. name );
}
}

Apply () method

The apply () method is similar to the call () method. The difference is the second parameter. In the apply () method, an array is passed.

The Code is as follows:

Function sayColor (sPrefix, sSuffix ){
Alert (sPrefix + this. color + sSuffix );
}

Var obj = new Object ();
Obj. color = "red ";

// Output The color is red, a very nice color indeed.
SayColor. apply (obj, new Array ("The color is", ", a very nice color indeed ."));

To use this method to implement inheritance, you only need to replace the values, calls, and deletion codes of the first three rows:

The Code is as follows:

Function ClassB (sColor, sName ){
// This. newMethod = ClassA;
// This. newMethod (sColor );
// Delete this. newMethod;
ClassA. apply (this, new Array (sColor ));

This. name = sName;
This. sayName = function (){
Alert (this. name );
}
}

The difference with call () is that if the Parameter order in the superclass is exactly the same as that in the subclass, arguments can be used for the second parameter.

Prototype chain

Inheritance is originally used for prototype chain in ECMAScript. Any attributes and methods of the Prototype object are passed to all instances of that class. Prototype chain uses this function to implement the inheritance mechanism.

Example of using prototype chain to implement inheritance:

The Code is as follows:

Function ClassA (){
}

ClassA. prototype. color = "red ";
ClassA. prototype. sayColor = function (){
Alert (this. color );
};

Function ClassB (){
}

ClassB. prototype = new ClassA ();

Note: When the ClassA constructor is called, no parameters are passed to it. This is a standard practice in the prototype chain. Make sure that the constructor does not have any parameters.

Hybrid mode

This method combines object impersonating with the prototype chain. Example:

The Code is as follows:

Function ClassA (sColor ){
This. color = sColor;
}
ClassA. prototype. sayColor = function (){
Alert (this. color );
}

Function ClassB (sColor, sName ){
ClassA. call (this, sColor );
This. name = sName;
}

ClassB. prototype = new ClassA ();
ClassB. prototype. sayName = function (){
Alert (this. name );
}

Call example:

The Code is as follows:

Var objb = new ClassB ("red", "test ");
Objb. sayColor (); // output red
Objb. sayName (); // output test

Author: Artwl