In-depth understanding of JavaScript functions

The scope of the function and the point of this is what I have already said in the previous article, which is mainly about the binding of functions. function bindings to create a function, you can invoke another function in a specific this environment with the specified parameters. This technique is often used in conjunction with the callback function and the event handler to preserve the code execution environment for the function while passing the function as a variable.

function bindings

Look at the following example:

var handler = {  message:"消息来了！",  handlerClick :function(event){    document.write(this.message);  }}//一般的指定不能改变this的指向vardocument.getElementById("btn");btn.addEventListener("click",handler.handlerClick,false);//返回undefined 因为this的范围指向的是btn而不是hanlder

The result is undefined, because this pointer is btn the DOM object instead of the Hanlder, so handler.message is not found at all.
Fortunately, we can solve this problem through a closure package.

//可以通过一个闭包来解决这个问题btn.addEventListener("click",function(event){  handler.handlerClick(event);},false);//返回 消息来了！，解决问题

But closures are always not a good idea, because too many closures make the code difficult to debug and understand, so we can use apply to adjust the direction of this. Next we define a bind method.

//但是过多的使用闭包并不是一个好办法，所以我们使用apply来改变this的指向function bind(fn,context){  returnfunction(){    return fn.apply(context,arguments);  };}//通过自定义的bind方法来绑定事件btn.addEventListener("click",bind(handler.handlerClick,handler),false);

This makes it possible to change the direction of this, which is also a method for many JavaScript third-party library binding functions. It is worth mentioning that the ES5 has a bind method, so that we do not have to customize a bind:

//ES5中自带就有bind方法，就不需要我们自定义bind方法了。//使用自带的bind方法btn.addEventListener("click",handler.handlerClick.bind(handler),false);

function currying

What is called the function of curry? is actually the translation of function currying. Curry is the meaning of curry, hehe. Well, back to the chase, currying can be understood as a function that creates one or more parameters that have been set. The implementation method and the function binding, all return a function through the closed packet. The difference between the two is that when the function is called, the returned function also needs to set some incoming arguments.

//then say function currying  //concept: Used to create a function that has one or more parameters set, which can be understood as a function in a set of functions  function  add   (num1,num2)  { return  num1+num2;} function  curriedAdd   { return  Add (5 , num3);} document.write (Add (2 , 3 ) +  "<br>" ); //5  document.write (curriedadd (3 )); //8  //the above example can show the concept of curry   

The above example is not a curry function, but it can show its concept. Here's a general way to create a function to curry:

///The following is a general approach to creating a function of curry function curry(fn){  varargs =Array. Prototype.slice.call (arguments,1);return  function(){    varInnerargs =Array. Prototype.slice.call (arguments);varFinalargs = Args.concat (Innerargs);//Innerargs stitching to args    returnFn.apply (NULL, Finalargs); }}//Use the following methods:varCurriedadd = Curry (Add,5);d Ocument.write (Curriedadd (3)+"<br>");//8varCURRIEDADDB = Curry (Add,5,Ten);d Ocument.write (CURRIEDADDB () +"<br>");//15//You can see the parameters are flexible and changeable

Maybe we can see that there is no understanding of what the effect is, so we could combine it with the function binding to achieve a random number of pass parameters:

//这样就可以在处理事件程序时传递其他参数了。//比如下例子：,注意我们传入了name参数var handlerB = {  message:‘消息来了！‘,  function(name,event){    document.write(this.message+":"+name);  }}btn.addEventListener("click",curriedBind(handlerB.handlerClick,handler,‘liufang‘),false);//消息来了！：liufang

The Bind method that comes with ES5 is also implemented as a curry, using the following methods:

//ES5中的bind已经实现了柯里化，所以可以直接使用：btn.addEventListener("click",handlerB.handlerClick.bind(handlerB,"liufangagain"),false);//消息来了！：liufangagain

function bindings and function curry provide powerful dynamic functions that can be used to create complex algorithms and functions, but with additional overhead.

All examples of this article address: Demo

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

In-depth understanding of JavaScript functions