Javascript wrapper Function

When designing the inheritance system of JavaScript, there is an important requirement: Method chain. In general, it is to call a method with the same name as the parent class in the method. Similar to Java's this. Super (). Method (). How can I wrap the Same Name method of the parent class into a subclass? This requires the wrapper function. Wrapper is called instead of wrap because it is more wrapper than wrap. For example, in the deep inheritance structure like Ext, if the parent class does not have a grandfather, the grandfather does not have a great grandfather, and traces down the prototype chain to obtain the functions required by it. In addition, wrapper functions are also applied in jquery. It seems that they are divided into three types: wrapall, wrapinner, and wrap, which are specifically used to deal with IE tables or other dom. There may be other functions. No matter what, Let's first look at how to implement it.

A common function

 
VaR greeting = function (World) {return "hello" + world + "! ";}; Alert (greeting (" world "));
 

<Br/> var greeting = function (World) {<br/> return "hello" + world + "! "; <Br/>}; <br/> alert (greeting (" world "); <br/>

RunCode

We put it into a deeper scope, not a bind function.

VaR wrap = function (FN) {return function () {return fn. Apply (null, arguments );};};
 

<Br/> var wrap = function (FN) {<br/> return function () {<br/> return fn. apply (null, arguments); <br/>}; <br/> var greeting = function (World) {<br/> return "hello" + world + "! "; <Br/>}; <br/> alert (greeting (" world "); <br/> alert (WRAP (greeting) (" world ")) </P> <p>

Run code

However, this only delays the execution time. The Null Value in the above function can also be changed to window.

 
VaR wrap = function (FN) {return function () {return fn. Apply (window, arguments );};};
 

<Br/> var wrap = function (FN) {<br/> return function () {<br/> return fn. apply (window, arguments); <br/>}; <br/> var greeting = function (World) {<br/> return "hello" + world + "! "; <Br/>}; <br/> alert (greeting (" world "); <br/> alert (WRAP (greeting) (" world ")) </P> <p>

Run code

Because there is always a need for people to call the function, null does not have this ability, it is on the window. Now we want to do thisArticle, Replace it with this. If there is no further improvement, here this is the replacement of window. The following describes the complexity. First, we need to break down the writing method to reduce the reading difficulty and break it into three parts like jquery:

 
VaR wrapper = function (FN) {// change the name here. VaR temp = function () {return fn. Apply (this, arguments) ;}; return temp ;};
 

// FN is the original function // temp is the modified function // wrapper is the packaging factory and only runs once // wrap is the modified function attribute, its parameters are the same as those of wrapper, but they can run countless times. // The original modified function is built into the internal function of the newly added function. VaR wrapper = function (FN) {var temp = function () {return fn. apply (this, arguments) ;}; temp. wrap = function (callback) {var Prev = FN; fn = function () {return callback. apply (prev, arguments) ;};}; return temp ;};
 

In this way, the following magic effects can be achieved:

<Br/> var wrapper = function (FN) {<br/> var temp = function () {<br/> return fn. apply (this, arguments); <br/>}; <br/> temp. wrap = function (callback) {<br/> var Prev = FN; <br/> fn = function () {<br/> return callback. apply (prev, arguments); <br/>}; <br/> return temp; <br/> }; <br/> var html = function (STR) {// number of original functions <br/> return "<p>" + STR + "</P> <p> "; <br/>}</P> <p> alert (HTML ("section"); <br/> var P = wrapper (HTML ); // package for the first time <br/> alert (P ("section") </P> <p> P. wrap (function (STR) {// second packaging <br/> return "" + This (STR) + "<p>"; <br/> }); </P> <p> alert (P ("section"); </P> <p> P. wrap (function (STR) {// the third package <br/> return "+ This (STR) +" "; <br/> }); <br/> alert (P ("section"); <br/>

Run code

It can be seen that this is always a function with the same name (P). That is to say, we can call it the parent method. This is also unnecessary for super keywords or related substitutes, you can easily call methods that overwrite the parent class. Therefore, jquery uses it to process Dom. Prototype did a good job, but the code was hard to write:

 
Wrap: function (wrapper) {VaR _ method = This; return function () {return wrapper. apply (this, [_ method. BIND (this)]. concat ($ A (arguments )));}},
 

Its method Chain Design:

For (VAR I = 0, length = properties. length; I <length; I ++) {var property = properties [I], value = source [property]; If (ancestor & object. isfunction (value) & value. argumentnames (). first () = "$ super") {VaR method = value; value = (function (m) {return function () {return ancestor [M]. apply (this, arguments) };} (property ). wrap (method); value. valueof = method. valueof. BIND (method); value. tostring = method. tostring. BIND (method);} This. prototype [property] = value ;}
 

Related documents: http://www.prototypejs.org/learn/class-inheritance