Common JavaScript definition class inheritance tool Method

I personally think that JavaScript scripting is a very simple language. It is not as simple as PHP, because its application environment is actually diverse, different browser environments and the unique nature of the language determine that it is too difficult to learn the Javascript language. Compatible with different environments and developing large JS applications. Here we will briefly introduce the next tool method, which can simplify the steps for writing JavaScript class inheritance.

First, let's review the general method of class inheritance.

Example:

The parent class is rectangle. The subclass is positionrectangle.

// Define the class rectanglefunction rectangle (W, h) {This. width = W; this. height = H;} // defines the class public method area () rectangle. prototype. area = function () {return this. width * This. height;} // define the subclass function positionrectangle (X, Y, W, h) {// call the rectangle constructor of the parent class. call (this, W, H); this. X = x; this. y = y;} // copy the prototype chain positionrectangle of the parent class. prototype = new rectangle (); // Delete redundant attributes Delete positionrectangle. prototype. width; Delete positionrectangle. prototype. height; // reset the constructor of the prototype chain, which refers to positionrectangle subclass. prototype. constructor = positionrectangle; // method of the subclass positionrectangle. prototype. caculatearea = function () {return this. x * This. y * This. width * This. height ;}

Test:

var a = new PositionRectangle(1,2,3,4);var area = a.caculateArea();alert(area);

The above steps can be used. writing class inheritance in JS requires many steps. The tool described next can simplify this step. This method is from the Javascript authoritative guide, but I am not sure, the example of the original book encountered some problems in borrows, so it was modified and simplified to get the next version. This method is a little complicated. The specific steps to solve the problem are as follows:

Get relevant properties -- construct prototype chain [Call parent class constructor to construct prototype chain -- delete local attributes and methods of parent class -- Copy borrow method to prototype chain -- Copy custom method To prototype chain -- set constructor, superclass, classname -- copy the attributes and methods of the class itself -- and return the class.

Function defineclass (data) {// obtain related attributes // data. name: Class Name // data. extend: reference of the parent class // data. constructor: constructor // data. methods: Class Object method // data. statics: attributes and methods of a class, not an object. borrows: indicates that you want to borrow methods from a class. borrows is the class var classname = data. name; var superclass = data. extend | object; var constructor = data. constructor | function () {}; VaR methods = data. methods | {}; var statics = data. statics | {}; var Borrows; // get borrows if (! Data. borrows) borrows = []; else if (data. borrows instanceof array) borrows = data. borrows; else borrows = [data. borrows]; // <! -- Start of constructing the prototype chain --> // create a parent class object to construct the constructor of the prototype chain. prototype = new superclass (); // obtain the prototype attributes and methods, and remove the locally defined method (var p in constructor. prototype) {If (constructor. prototype. hasownproperty (p) delete constructor. prototype [p];} // copy all borrowed class methods to the prototype chain for (VAR I = 0; I <borrows. length; I ++) {var c = borrows [I]; for (VAR P in C. prototype) {If (typeof C. prototype [p]! = "Function") continue; constructor. prototype [p] = C. prototype [p] ;}}// copy the method to the prototype chain and place it at the end of the chain to overwrite the Same Name method for (var p in methods) constructor when the point is borrowed. prototype [p] = methods [p]; // you can specify the constructor and superclass attributes. prototype. constructor = constructor; constructor. prototype. superclass = superclass; // set the class name if (classname) constructor. prototype. classname = classname; // <! -- The prototype chain of the constructed class ends --> // copy the attribute of the class itself for (var p in statics) constructor [p] = statics [p]; // return the constructed class return constructor ;}

This method requires a data object as a parameter. The specific attributes are as follows:

// Data. Name: name of the class

// Data. Extend: reference of the parent class

// Data. constructor: Constructor

// Data. Methods: Class Object Method

// Data. statics: attributes and methods of the class, not objects.

// Data. borrows: indicates that you want to borrow methods from a class. borrows is the class.

// Data. Provides: queries whether this class provides all methods of all classes in provides. If not, the constructor is interrupted and an exception is thrown.

A simple example is used to implement the same inheritance as the above example:

VaR person = defineclass ({name: "person", Methods: {say: function () {alert ("Hello! ") }}) Var rectangle = defineclass ({name:" rectangle ", constructor: function (W, h) {This. width = W; this. height = H ;}, Methods: {area: function () {return this. width * This. height ;}}); var positionrectangle = defineclass ({name: "positionrectangle", extend: rectangle, constructor: function (X, Y, W, h) {This. superclass (W, H); this. X = x; this. y = y ;}, Methods: {caculatearea: function () {return this. x * This. y * This. width * This. height; }}, statics: {positionnow: "positionnow"}, borrows: person}) var A = new positionrectangle (,); var area =. caculatearea (); alert (area) Alert (positionrectangle. positionnow); // class method. say (); // borrow Method

For a large JS application, if Javascript is used to construct a large rich client application or implement a JS effect framework, the use of class inheritance is definitely the core technology. Do not learn JS well.

Link: http://zhenpengday.blog.163.com/blog/static/165988143201011501630727/