JS in, subclass call function of parent class

Source: Internet
Author: User
Tags prototype definition

Although there is no direct object-oriented feature in the summary JS, it can be prototype to simulate object-oriented features such as inheritance and polymorphism. And most object-oriented languages, such as C + +. Java, etc.) compared to JS in order to achieve object-oriented is a bit cumbersome, abstract.  Need to have a deep understanding of JS's prototype mode. In the development process, sometimes encountered a problem: Suppose in the subclass "overwrite" a method of the superclass, but still need to call a superclass method in the subclass method, what should be done? Suppose Java, a simple superkeyword can solve this problem, but suppose JS?
The most basic way to solve this problem is to use the superclass type in the subclass. Through Applykeyword. Runs the superclass method one time with the current class instance reference. For example, the following:
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 time The Show method defined in a is run (displays the value of A.A). Indicates 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);};/ /Run the Covered method B.show ();
The Show method is defined again in the prototype of B, which means that Class B covers the show method of Class A.

Note that a.prototype.show.apply (this, arguments) is actually using JS's prototype feature.  A Class A show method is run in Class B objects (in Class B objects). JS Special Dynamic language feature makes "overlay" This semantics can occur at any time. It is even possible to cancel the "overlay" semantics by manipulating the prototype, which is the flexibility and power of JS.

Further through the above example, can find that JS "inheritance", "Overwrite" and "call 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 partly from the ExtJS library, partly from the prototype library)
Namespace

Defines the root namespace ALV = {};//Defines the method of the registration 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 code above. The prototype of a subclass is linked to a superclass object. Completed the succession of prototype. In the Callparent method, the method name (m variable) is found by searching the method of the current class, and then the method of the same name is found in the superclass's prototype, and the call of the superclass method is completed on the subclass object using the apply operation of the superclass method.
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 can be seen from the test code, the Alvin.test.b class inherits the Alvin.test.a class and covers the Show method. In the Show method of Class B, this.callparent (arguments) invokes the call to the class A Show method.

This allows the class B to naturally access the superclass's name, which does not have any interest in the specified class.

Copyright notice: This article Bo Master original articles, blogs, without consent may not be reproduced.

JS in, subclass call function of parent class

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.