In JS, subclasses call Super class functions

Although not directly with the object-oriented features, JS can still simulate object-oriented inheritance and polymorphism by prototype.　　Compared with most object-oriented languages (such as C++,java, etc.), JS to achieve object-oriented is still slightly cumbersome and abstract, need to have a deep understanding of JS prototype model. In the development process, sometimes you encounter a problem: if you "overwrite" a method of a superclass in a subclass, but still need to call a superclass method in a subclass method, what should I do? If it is Java, a simple super keyword can solve the problem, but if it is JS it?
The most basic way to solve the problem is to use the superclass type in the subclass, and execute the superclass method with the current class instance reference by using the Apply keyword. As follows:
Defining Class A

Define Class afunction A (a) {this.a = A;} Define the Show method for class A a.prototype.show = function () {alert ("A:" + THIS.A);};

Define Class B and inherit from a

Define class Bfunction B (A, B) {//Call A's constructor a.apply (this, arguments); this.b = b;} The prototype of link a b.prototype = new A ();

Instantiate a Class B object and call the Show method

var B = new B (+, +); B.show ();

At this point, the Show method defined in a (showing the value of A.A) is executed, indicating that class B has inherited the show method from Class A
Class B overrides the Show method

Override the Show method b.prototype.show = function () {a.prototype.show.apply (this, arguments); alert ("B:" + this.b);};/ /B.show () after the implementation of the overlay method;

The Show method is redefined in the prototype of B, which means that Class B overrides the show method of Class A.　　Note that a.prototype.show.apply (this, arguments) is actually using JS's prototype feature to perform a Class A show method in Class B objects (in Class B objects). JS Special Dynamic language features so that "overlay" This semantics can occur at any time, and even by manipulating the prototype to remove the "overlay" semantics, which is the flexibility and power of JS.

Further through the above example, it can be found that JS "inherit", "Overwrite" and "Call the superclass method" although not difficult to understand, but it is still more cumbersome to write, the following code can simplify the process. (The following code is inspired in part from the ExtJS library, partially referenced from the prototype library)
namespace

Define the root namespace ALV = {};//Defines the method of registering the namespace alv.namespace = function (ns) {var root = Window;var parts = Ns.split ("."); for (var i = 0; i < parts.length; i++) {var p = parts[i];if (!root[p]) {root[p] = {};} root = Root[p];};

apply method for merging objects

Merge Object member Alv.apply = function (Obja, OBJB, Def) {if (def) {alv.apply (Obja, Def);} if (Obja && objb && typeof objb = = = ' object ') {for (Var o in objb) {Obja[o] = Objb[o];}};

methods for defining classes

Prototype Definition alv.define = function (clazz, config) {var parts = clazz.split ("."); var root = Window;for (var i = 0; i < parts.length-1; i++) {root = Root[parts[i]];} var cn = parts[parts.length-1];if (!ROOT[CN]) {ROOT[CN] = function () {};} Clazz = root[cn];//Assigns the members of the Proto object to the prototype of the class alv.apply (Clazz.prototype, config); return clazz;};

methods for defining subclasses and inheriting super-classes

Defines the method of inheritance Alv.extend = function (base, child, Proto) {//assigns the superclass prototype to the prototype of the class var c = alv.define (child); if (base && typeof b ASE = = = "function") {C.prototype = new base ();} if (proto && typeof proto = = "Object") {alv.apply (C.prototype, proto);} Call the Superclass method c.prototype.callparent = function (args) {var m;for (var o in this) {if (this[o] = = = This.callParent.caller) {m = o;}} var method = Base.prototype[m];if (Method && typeof method = = = "function") {method.apply (this, args);};};

In the above code, the subclass of prototype link to the Superclass object, complete the prototype inheritance, and Callparent method, through the current class call method lookup, find the method name (m variable), and then in the prototype of the superclass find the same name method, Using the apply operation of the superclass method, the call to the superclass method is completed on the subclass object.
Test Code

Define the namespace Alv.namespace ("Alvin.test"),//define the superclass Alv.define ("Alvin.test.a", {a:100,show:function () {alert ("A:" + THIS.A);}} );//define Subclass Alv.extend (ALVIN.TEST.A, "alvin.test.b", {a:100,b:200,show:function () {this.callparent (arguments); Alert (" B: "+ this.b);}); /Instantiation of Class B object var b = new alvin.test.b (); B.show ();

As you can see from the test code, the Alvin.test.b class inherits the Alvin.test.a class and overrides the Show method, and in class B's Show method, the This.callparent (arguments) call completes the call to the class A Show method. 。 This allows the class B to naturally access the specified method in the superclass without worrying about what name the superclass uses.