Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to use apply, call and bind in Javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Apply 、 call

In javascript, both call and apply exist to change the context of the runtime of a function, in other words, to change the direction of the this inside the body of the function.

A major feature of JavaScript is that functions have the concepts of "definition-time context" and "run-time context" and "context is changeable".

Let's start with a chestnut:

Function fruits () {} fruits.prototype = {color: "red", say: function () {console.log ("My color is" + this.color);}} var apple = new fruits; apple.say (); / / My color is red

But if we have an object banana= {color: "yellow"} and we don't want to redefine the say method on it, we can use the say method of apple through call or apply:

Banana = {color: "yellow"} apple.say.call (banana); / / My color is yellow apple.say.apply (banana); / / My color is yellow

So, you can see that call and apply appear to change this dynamically, when an object does not have a method (banana does not have a say method in Ben Chestnut), but others have (apple has a say method in Ben Chestnut), we can use call or apply to operate with the methods of other objects.

The difference between apply and call

For both apply and call, the effect is exactly the same, except that the parameters are accepted in a different way. For example, there is a function defined as follows:

Var func = function (arg1, arg2) {}

You can call it in the following ways:

Func.call (this, arg1, arg2); func.apply (this, [arg1, arg2])

Where this is the context you want to specify, it can be any JavaScript object (everything in JavaScript is an object), call needs to pass the parameters in order, and apply puts the parameters in an array.

In JavaScript, the number of arguments to a function is not fixed, so if conditions apply, use call when your arguments are explicitly known.

When in doubt, use apply, and then pass the parameter push into the array. When the number of parameters is uncertain, the arguments array can also be used inside the function to traverse all the parameters.

In order to consolidate and deepen memory, here are some common uses:

1. Append between arrays

Var array1 = [12, "foo", {name "Joe"},-2458]; var array2 = ["Doe", 555,100]; Array.prototype.push.apply (array1, array2); / * array1 value is [12, "foo", {name "Joe"},-2458, "Doe", 555,100] * /

2. Get the * * value and minimum value in the array

Var numbers = [5,458,120,215]; var maxInNumbers = Math.max.apply (Math, numbers), / / 458maxInNumbers = Math.max.call (Math,5, 458,120,215);

Number itself doesn't have a max method, but Math does, and we can use it with call or apply.

3. Verify whether it is an array (provided that the toString () method has not been overridden)

FunctionisArray (obj) {returnObject.prototype.toString.call (obj) = ='[object Array]';}

4. Class (pseudo) arrays use array methods

Var domNodes = Array.prototype.slice.call (document.getElementsByTagName ("*"))

There is an object structure called pseudo array in Javascript. In particular, there are arguments objects, and things like calling getElementsByTagName and document.childNodes, which return NodeList objects that are pseudo arrays. Push, pop and other methods under Array cannot be applied.

But we can convert it to a real array of objects with length attributes through Array.prototype.slice.call, so that domNodes can apply all the methods under Array.

In-depth understanding of the use of apply, call

Let's borrow some test questions to get a deeper understanding of apply and call.

Define a log method so that it can proxy the console.log method. The common solution is:

Function log (msg) {console.log (msg);} log (1); / / 1 log (1); / / 1

The above method can solve the most basic requirements, but when the number of parameters passed is uncertain, the above method is invalid. You can consider using apply or call at this time. Note that the number of parameters passed here is uncertain, so it is * to use apply as follows:

Function log () {console.log.apply (console, arguments);}; log (1); / / 1 log (1Magne2); / / 1 2

The next requirement is to add a "(app)" dropout to each log message, such as:

Log ("hello world"); / / (app) hello world

What should I do to be more elegant? At this point, you need to think that the arguments parameter is a pseudo array, converted to a standard array through Array.prototype.slice.call, and then use the array method unshift, like this:

Function log () {var args = Array.prototype.slice.call (arguments); args.unshift ('(app)'); console.log.apply (console, args);}

Bind

After talking about apply and call, let's talk about bind. The bind () method is very similar to apply and call, but can also change the direction of the this in the body of the function.

MDN explains that the bind () method creates a new function called the binding function. When the binding function is called, the binding function calls the original function with the * parameters passed into the bind () method when it is created as the this, and the second and subsequent parameters of the bind () method plus the parameters of the binding function itself as the parameters of the original function.

Let's take a look at how to use it directly. In a common monolithic mode, we usually use _ this, that, self, etc., to save the this, so that we can continue to refer to it after changing the context. Like this:

Var foo = {bar: 1, eventBind: function () {var _ this = this; $('.someClass'). On ('click',function (event) {/ * Act on the event * / console.log (_ this.bar); / / 1});}}

Due to the unique mechanism of Javascript, the context has changed during the transition from eventBind:function () {} to $('.someClass'). On ('click',function (event) {}), the above methods of using variables to hold this are useful and not a problem. Of course, using bind () can solve this problem more elegantly:

Var foo = {bar: 1, eventBind: function () {$('someClass'). On ('click',function (event) {/ * Act on the event * / console.log (this.bar); / / 1} .bind (this));}}

In the above code, bind () creates a function whose this keyword is set to the value passed in when the click event is bound to be called (in this case, the parameter passed in when bind () is called). So here we pass in the desired context this (which is actually foo) into the bind () function. Then, when the callback function is executed, this points to the foo object. And a simple chestnut:

Var bar = function () {console.log (this.x);} bar (); / / undefined var func = bar.bind (foo); func (); / / 3

Here we create a new function func. When a binding function is created with bind () and it is executed, its this will be set to foo instead of the global scope as we did when we called bar ().

There is an interesting question: what is the output value if you bind () twice or bind () three times in a row? Like this:

Var bar = function () {console.log (this.x);} var foo = {x console.log 3} var sed = {x console.log 4} var func = bar.bind (foo) .bind (sed); func (); / /? Var fiv = {x foo 5} var func = bar.bind (foo) .bind (sed) .bind (fiv); func (); / /?

The answer is that 3 will still be output on both occasions, rather than the expected 4 and 5. The reason is that bind () is invalid multiple times in Javascript. For a deeper reason, the implementation of bind () is equivalent to using the function to package a call / apply internally, and the second bind () is equivalent to enclosing * bind (), so the bind after the second time cannot take effect.

Comparison of apply, call and bind

So what are the similarities and differences among apply, call and bind? When to use apply, call, when to use bind. A simple chestnut:

Var obj = {x: 81,}; var foo = {getX: function () {return this.x;}} console.log (foo.getX.bind (obj) ()); / 81 console.log (foo.getX.call (obj)); / 81 console.log (foo.getX.apply (obj)); / / 81

All three outputs are 81, but notice that using the bind () method, he is followed by a pair of parentheses.

That is, the difference is that you use the bind () method when you want to change the context not immediately, but the callback. Apply/call executes the function immediately.

To sum up again:

Apply, call, and bind are all used to change the direction of the this object of the function.

The parameters apply, call and bind are all the objects that this points to, that is, the context you want to specify.

Apply, call and bind can all use subsequent parameters to pass parameters.

Bind returns the corresponding function so that it can be called later, while apply and call are called immediately.

This is the end of the introduction of "how to use apply, call, bind in Javascript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.