How long does this js Code save you?

 

1. application case:

Var Mouse = function (){

// Look! No that = this!

This. position = [0, 0];

If (document. addEventListener ){

Document. addEventListener ('mousemove ',?); // This. move?

} Else if (document. attachEvent ){

Document. attachEvent ("onmousemove ",?); // This. move? How to put it in

}

 

};

Mouse. prototype. move = function (arg1, arg2, event ){

Event = window. event | event;

Var x = event. pageX | event. offsetX,

Y = event. pageY | event. offsetY;

This. position = [x, y];

This. log (arg1, arg2 );

};

Mouse. prototype. log = function (arg1, arg2 ){

Console. log (arg1 + "," + arg2 );

Console. log (this. position );

};

New Mouse ();

Www.2cto.com

You know above '? What are you doing there? I want to bind my move METHOD TO THE mousemove of the document, but it is difficult. In this case, Mouse. prototype. move

This in will not point to the Mouse object. I believe you often encounter this problem. Maybe you knew how to solve it, but is there a faster and simpler way? The answer is:

Function. prototype. bind () is a magic thing, but ie6 7 8 does not support it. Generally, modern browsers support it. What we need to do next is to imitate it,

Of course, we need to imitate such a good method. For how to imitate it, see the original method of nothing below.

(Function (){

Var proxy = function (fn, target ){

Var proxy = function (){

If (2 <arguments. length) {// when a parameter exists for the function to be proxy

Var privateArgs = Array. prototype. slice. call (arguments, 2 );

// Get it from the second one, [this, bound object, parameter list]

Return function (){

Var args = Array. prototype. slice. call (arguments );

--> Here, the arguments is not the same as the outside. This is the arguments object inside the function to be proxy,

For example, the arguments [0] = [object Event] of the move function is the e parameter in the Event.

 

Array. prototype. unshift. apply (args, privateArgs );

 

--> The uploaded parameters are added here, and the parameter format is the same as that of native bind.

//-> And put private parameters in the front, such as a = new Mouse (); a. move );

// If this move method does not have a parameter, it means prototype. move = fn () {arguments },

// The input parameter, arguments. length = 3,

// Arguments [0] = 1, arguments [1] = 2, arguments [2] = [object event].

 

Return fn. apply (target, args );

}

// The reason for this complexity is that the proxy function can directly access arguments. For example, I directly use it instead of passing parameters to the proxy function.

// This arguments will contain the same object as the arguments of native Function. prototype. bind,

// The code here is esoteric because you don't understand what arguments are in the native bind here. If you know it, you will know why I bound my arguments.

// The main purpose of doing so much is to make the arguments in the function you are proxy to be consistent with the arguments object in function. prototype. bind.

}

Return function (){

Return fn. apply (target, arguments );

}

}

Return proxy. apply (null, arguments );

};

/* Supports native use of native */

Function. prototype. bind = Function. prototype. bind |

Function (target) {// here this refers to the function to be proxy

If (1 <arguments. length ){

Var args = Array. prototype. slice. call (arguments, 1); // retrieve the parameter list

Args. unshift (this, target); // this args is eventually changed to [this, bound object, parameter list]

Return proxy. apply (null, args );

 

--> It is estimated that everyone will make the same mistake as the 17th floor. The reason for this complicated operation of the arguments object is to ensure that the arguments object is passed into the proxy function and that it is not invalid.

}

Return proxy (this, target );

};

})();

Www.2cto.com

Why does the above Code always return back to the proxy, because in this way you can call this. move. bind (this,) () and then the function will be executed immediately!

With the above code, we can easily implement it "? "No. What code should I write here? ^ _ ^, simple.

If (document. addEventListener ){

Document. addEventListener ('mousemove ', this. move. bind (this, 1, 2 ));

} Else if (document. attachEvent ){

Document. attachEvent ("onmousemove", this. move. bind (this, 1, 2 ));

}

Www.2cto.com

Is it very easy for this method to point to other objects when an event is to be added and then called in the future ..

It's hard to understand the above Code.

Var a = function (){

Console. log (arguments [0]); // 1

Console. log (arguments [1]); // 2

Console. log (this. key1 );

// If you bind parameters in this way, you can only list them in the same way as the native bind. This is so simple,

};

Var B = {

Key1: "value1"

};

 

A. bind (B, 1, 2 )();

Www.2cto.com

 

I think this is a mistake that many people make. The Code is as follows:

Function. prototype. bind = function (target ){

Var self = this;

Return function (){

Return self. apply (target, arguments); // The arguments here cannot be passed in.

}

}

Var a = function (){

Console. log (arguments. length); // In this case, the arguments parameter is invalid.

// Arguments. length = 0.

Console. log (this. key1 );

};

Var B = {

Key1: "value1"

};

A. bind (B, [1, 2], 3) (); // you can see from here that the expected arguments. length = 2

// This is why I am eager to operate the arguments parameter.

// I know most people here will think right, but you are wrong. You still have to think about it on the 17th floor.

 

Source code without comments,

(Function (){

Var proxy = function (fn, target ){

Var proxy = function (){

If (2 <arguments. length ){

Var privateArgs = Array. prototype. slice. call (arguments, 2 );

Return function (){

Var args = Array. prototype. slice. call (arguments );

Array. prototype. unshift. apply (args, privateArgs );

Return fn. apply (target, args );

}

}

Return function (){

Return fn. apply (target, arguments );

}

}

Return proxy. apply (null, arguments );

};

/* Supports native use of native */

Function. prototype. bind = Function. prototype. bind |

Function (target ){

If (1 <arguments. length ){

Var args = Array. prototype. slice. call (arguments, 1 );

Args. unshift (this, target );

Return proxy. apply (null, args );

}

Return proxy (this, target );

};

})();

Www.2cto.com

 

 

 

 

If you need to repost this article, please attach a link

 

 

Http://www.cnblogs.com/nothingbrother/