This JS code has to save you how much time _javascript skills

1. Application Case:

Copy Code code as follows:

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 do you 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 = Position = [x, y];
This.log (ARG1,ARG2);
};
Mouse.prototype.log = function (Arg1, arg2) {
Console.log (arg1+ "," +arg2);
Console.log (this.position);
};
New Mouse ();

Above you know '? ' What's going on there? I want to bind my Move method to document MouseMove, but I have a problem, so Mouse.prototype.move
This will not point to the object of mouse, I believe you often encounter this problem. Maybe you already know how to solve it, but is there a quicker and simpler way? The answer is:
Function.prototype.bind () This magical thing, but IE6 7 8 are not supported, the general modern browser is supported, what we will do next is to imitate him,
Such a good method of course to imitate it, how to imitate the original method of seeing nothing below

Copy Code code as follows:

(function () {
var proxy = function (FN, target) {
var proxy = function () {
if (2 < Arguments.length) {//There is a parameter to the function of the agent
var Privateargs = Array.prototype.slice.call (arguments, 2);
Take out from the second start, [this, the bound object, the 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 within the function of the agent,
For example, the Arguments[0]=[object event of the move function here is the e parameter inside this event.
Array.prototype.unshift.apply (args, Privateargs);
--> here in addition to the incoming parameters, it is realized, and the same as the original bind parameter form
-> and here is to put the private parameters to the front of such as A=new Mouse (); A.move (1,2);
If this move method has no arguments, the meaning is Prototype.move=fn () {arguments},
And I came in. parameters, arguments.length=3 of parameters,
Arguments[0]=1,arguments[1]=2,arguments[2]=[object event].
Return fn.apply (target, args);
}
The reason why this is complicated is because, in the function of the agent can directly access the arguments, for example, I do not give the proxy function pass parameters, and directly use
So this arguments will contain the same objects as the arguments of the native Function.prototype.bind,
The code here is deep because you don't understand what arguments is in native bind here, and you know why you bind my own arguments.
The main purpose of doing so much is to make your arguments within the function of the agent consistent with what is contained in the arguments object in Function.prototype.bind.
}
return function () {
Return fn.apply (target, arguments);
}
}
return proxy.apply (null, arguments);
};
* * Support native use of native */
Function.prototype.bind = Function.prototype.bind | |
function (target) {//Here's this refers to the functions to be represented
if (1 < arguments.length) {
var args = Array.prototype.slice.call (arguments, 1); Remove argument list
Args.unshift (this, target); This args eventually becomes the [this, the bound object, the argument list]
return proxy.apply (null, args);
If the direct proxy (args), the trouble comes, args became a proxy function of a parameter, it will error,
In fact, here is mainly separate task processing, proxy only care about the agent and parameters are how to pass proxy, if the agent has no parameters, direct;
return proxy [This, target]--> return fn.apply (target, arguments); That's the answer to the 17 floor.
--> estimated that we will make the same mistake as the 17 floor, the reason why this complex operation arguments object, just to ensure that the transfer into the proxy function, to ensure that the arguments object does not fail
}
Return proxy (this, target);
};
})();

The above code why do I have to return back to the agent, because so you can call This.move.bind (this,1,2) () and then immediately execute the function!
With the above code, we can easily implement the "?" What code do you want to write here, ^_^, easy?

Copy Code code as follows:

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));
}

Is it not easy to get to the point where you want to add an event and then call the method that wants to refer to another object?
See the above code a little difficult to understand, to a simple point

Copy Code code as follows:

var a = function () {
Console.log (Arguments[0]); 1
Console.log (Arguments[1]); 2
Console.log (This.key1);
With this binding parameter, my arguments are listed to be as simple as native bind,
};
var B = {
Key1: "Value1"
};
A.bind (b, 1, 2) ();

Refute 17 floor Classmate's code error, I think this is a lot of people will make mistakes, code as follows

Copy Code code as follows:

Function.prototype.bind = function (target) {
var self = this;
return function () {
Return self.apply (target, arguments); There's no arguments in here.
}
}
var a = function () {
Console.log (arguments.length); If this bind, the arguments parameter fails.
Arguments.length=0.
Console.log (This.key1);
};
var B = {
Key1: "Value1"
};
A.bind (b, [1, 2], 3) (); It can be seen from here that the expected arguments.length=2
That's why I'm so well-meaning. Operation arguments parameters
I know most people here will feel right, but you're wrong, 17 floor students you still have to think about

Without the annotation of the source code,

Copy Code code as follows:

(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);
};
* * Support 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);
};
})();

This article is followed by the article, I'm going to tell you a detailed story, if you don't see it.
First of all, this blog does not have time to do gorgeous layout, just plain code, only for JS code enthusiasts use

Copy Code code as follows:

var Mouse = function () {
if (Document.addeventlistener) {
Document.addeventlistener (' MouseMove ', This.move.bind (this,1,2,[3,4));
else if (document.attachevent) {
Document.attachevent ("OnMouseMove", This.move.bind (this,1,2,[3,4));
}
};
Mouse.prototype.move = function () {
Console.log (ARGUMENTS[ARGUMENTS.LENGTH-1].CLIENTX);
};

The output of the arguments here is very good explanation of the above code, do not know how to combine the new given to understand the case.

Copy Code code as follows:

var Privateargs = Array.prototype.slice.call (arguments, 2);
Private parameters, representing the agent's arguments, here represent 1,2,[3,4]
return function () {
var args = Array.prototype.slice.call (arguments);
Here's the argument, which represents the argument of the agent, as in the event function, E
Array.prototype.unshift.apply (args, Privateargs);
Here is a combination of the parameters of the two, and then the private argument is in front of it to match the original parameter order
Return fn.apply (target, args);
Pass the merged parameter here including 1,2,[3,4] e, and apply
}

OK, here, you will find a good JS technique, is not compatible with the processing e=window.event| | E, direct use of arguments[arguments.length-1] will be compatible with the representative
All Browser event e objects, save a lot of code with thinking time,
The reason for writing this code, is to hope that we have a real understanding of JS code, know the true charm of JS where, if the real read this article, at least you know arguments is
What's going on, this blog is very shabby, only simple code, suitable for JS code enthusiasts to learn.
In fact, the real JS charm is more than this. With the above examples plus the explanation, I believe you should also know about it, do not know more than a few demo on it.
A JS enthusiasts, will occasionally post some more fresh code for everyone to learn, the purpose of this blog is to jointly learn the essence of JS code.