Bind, call, and apply in JavaScript

Look at the following code:

Var

At first glance, I can guess what it is for. It converts x.y (z) into Y (x,z).

Writing good code can be easier to read. After reading the two books of functional JavaScript and JavaScript allongé (two are pretty good books), and with some experience in JavaScript functional programming, figuring out the meaning of the above code is no pressure. But how do you explain it to someone who has no experience in functional programming (as most people care)?

//set up a simple object as "context"varcontext = {foo: "Bar" };//a function that points to the Foo variable in the This contextfunctionReturnfoo () {return  This. Foo;}//The variable does not exist in scope, so the undefined is displayedReturnfoo ();//= undefined//If we bind it to a context contextvarbound =Returnfoo.bind (context);//There's this variable in the scope now.Bound ();//= "Bar"////This is the role of Function.prototype.bind.//since Returnfoo is also a function, it inherits the prototype of function////If you feel like enjoying it, then read on.////There are many ways to bind a function in a context//call and apply allow you to invoke functions in contextReturnfoo.call (context);//= BarReturnfoo.apply (context);//= Bar//Add a function to an objectContext.returnfoo =Returnfoo;context.returnfoo ();//= Bar////Now let's play a little weird stuff .////there is a method called slice in Array.prototype.//call slice on an array to return an array from start Index to end index[1,2,3].slice (0,1);//= [1]//so we assign the Array.slice to a local variable slicevarSlice =Array.prototype.slice;//now the slice is "free" because the slice in Array.prototype generally specifies the context//or the default is this, at which point Slice will not workSlice (0, 1);//= = Typeerror:can ' t convert undefined to objectSlice ([0], 1);//=-TypeError: ...//But if we use call or Apply,slice and we're going to do it in one contextSlice.call ([0], 1);//= [1]//Apply is the same as call , except that the arguments are placed in an arraySlice.apply ([n-a], [0,1]);//= [1]//using call is the right thing to do, so what about using bind? //Yes, we're going to bind "call" to slice.Slice =Function.prototype.call.bind (Array.prototype.slice);//now slice can use the first argument as a contextSlice ([0], 1);//= [1]////It's cool, right. Let's do one more thing now .////now we're doing something about bind itself that we just did to silce.varBind =Function.prototype.call.bind (Function.prototype.bind);//sum up here, think about it.//What's going on? We changed call,//returns a function that receives a function and a context as an IC Eucalyptus//and returns a fully-bound function//back to the original examplevarcontext = {foo: "Bar" };functionReturnfoo () {return  This. Foo;}//Now let's use the Magic "bind" functionvarAmazing =bind (Returnfoo, context); amazing ();//= Bar

Original: http://www.html-js.com/article/1553

English Original: https://variadic.me/posts/2013-10-22-bind-call-and-apply-in-javascript.html

Reference article: Https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Bind, call, and apply in JavaScript