JS in the call, apply, bind use guide, with part of the principle.

Why do you need these? Mainly because this is a good thing to see this.

Box.onclick = function () {
function fn () {
alert (this);
}
FN ();
};

We thought this one was pointing to box, but it was window. Generally we solve this problem:

Box.onclick = function () {
var _this = this;
function fn () {
alert (_this);
}
FN ();
};

Save this.

In some cases, sometimes we want the pseudo-array to be able to invoke some of the methods of the array, when call, apply, bind comes in handy.

Let's first fix the first problem fixed this point.

Box.onclick = function () {
function fn () {
alert (this);
}
FN ();
};

Change to the following:

Box.onclick = function () {
function fn () {
Console.log (this);
}
Fn.call (this);
};

It's amazing that call is changing the direction of this, and the first one is the object that you want to borrow.

Fn.call (this);

This means that this is called the FN function, here is the box, this is no comment? If you don't know that, chances are you're Javscript's new friend. Box called FN, which is very important, we know this is always pointing to an object, just box is an object. Then the this in FN is box.

Box.onclick = function () {
function fn () {
Console.log (this);
}
Fn.call (this);
};

This sentence can be abbreviated in some cases, such as:

Box.onclick = function () {
var fn = function () {
Console.log (this); Box
}.call (this);
};

or this:

Box.onclick = function () {
(function () {
Console.log (this);
}.call (this)); Box
};

or so:

var objname = {name: ' JS2016 '};
var obj = {
Name: ' 0 _ 0 ',
Sayhello:function () {
Console.log (this.name);
}.bind (objname)
};
Obj.sayhello ();//js2016

Call and apply, bind but are used to change the direction of this, but there are some small differences. Let's see what the difference is.

function fn (a,b,c,d) {
Console.log (A,B,C,D);
}

Pager
Fn.call (null,1,2,3);

Apply
Fn.apply (null,[1,2,3]);

Bind
var f = fn.bind (null,1,2,3);
F (4);

The results are as follows:

1 2 3 undefined
1 2 3 undefined
1 2 3 4

The first argument is that you want to borrow the object, but so we do not need, all passed a null, of course, you can also preach other, anyway, it is not used here, except for the first parameter will be passed as the actual parameters into the function.

Call is a one-pass value, apply an array, bind is also a value, but how much different from call and apply, using call and apply will directly execute the function, and bind does not instead will be bound to return a new function, It's up to you to decide when to call.

var objname = {name: ' JS2016 '};
var obj = {
Name: ' 0 _ 0 ',
Sayhello:function () {
Console.log (this.name);
}.bind (objname)
};
Obj.sayhello ();//js2016

Here is why I have to use the bind reason, if you call the words will be an error. Think of this sayhello in obj has been executed, there is no sayhello this function.

These methods can be used to help you solve a lot of problems such as:

Under normal circumstances, Math.max can only use this.

Math.max (10,6)

But if you want to pass an array, you can use apply.

var arr = [1,2,30,4,5];
Console.log (Math.max.apply (Null,arr));

Or the way you want the pseudo-array to call the array.

function fn () {
[].push.call (arguments,3);
Console.log (arguments); [1, 2, 3]
}
FN (n);

Furthermore:

var arr = [' aaabc '];
Console.log ('. Indexof.call (arr, ' B ')); 3

No, it's rescue, and of course there's plenty to take advantage of, and Huaihui to go.

Simply say this rescue principle, in fact, the browser does not really care about who you are, it only cares about what you passed to me is not I can run, as follows:

Normal situation

var str = ' AAABC ';
Console.log (Str.indexof (' B '));

And this situation actually does the same thing as above, see me to dismantle.

var arr = [' aaabc '];
". Indexof.call (arr);

This is said to let arr invoke the IndexOf method of the string, previously said that the browser does not care who you are, so anyone can come to call, but not 100% success, specifically see below.

". Indexof.call (arr, ' B ')

arr here is [' AAABC '] and the interior is likely to be ' aaabc ', so this is the code below.

' Aaabc '. IndexOf (' B ');

This is their secret.

It has to be said that bind is incompatible under some browsers. Let's simulate a play.

Function.prototype. $bind = function (obj) {
Save current This
var _this = this;
Intercept all actual parameters except the first one
var a = [].slice.call (arguments,1);
Returns a new function
return function () {
Let the current of the currently called function point to obj, and pass the argument to it, where concat is used because we may pass arguments after the binding, so we merge them together. such as f (4) This is the parameter passed after the binding, a this argument is binding timing.
_this.apply (Obj,a.concat ([].slice.call (arguments)));
};
};

function fn (a,b,c,d) {
Console.log (A,B,C,D);
}

var f = fn. $bind (null,1,2,3);
F (4);

This method is quite different from the actual bind, such as

var arr = [' JSS '];

var index = ". IndexOf. $bind (arr, ' S ');
Console.log (Index ())

------------------

function FFF () {
[].push. $bind (arguments,1);
Console.log (arguments);
}

FFF ();

These can not be used, because the technology is limited there is no way to bring everyone to encapsulate a perfect bind, if you need to search online.

JS in the call, apply, bind use guide, with part of the principle.