函数柯里化

anbang · anbang · commit 3af3eeb4ae4e · 2016-10-10T14:13:25.000+08:00
diff --git a/JS高级技巧/高级函数.md b/JS高级技巧/高级函数.md
@@ -399,3 +399,66 @@ ECMAScript 5 为所有函数定义了一个原生的 bind() 方法，进一步
 
 只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于**事件处理程序以及 setTimeout() 和 setInterval() **。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。
 
+# 函数柯里化
+
+与函数绑定紧密相关的主题是函数柯里化（function currying），它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数
+
+	function add(arg1,arg2){
+	    return arg1+arg2;
+	}
+	
+	function curriesAdd(num2){
+	    return add(5,num2);
+	}
+	console.log(add(2,3));//5
+	console.log(curriesAdd(5));//10
+
+这段代码定义了两个函数： add() 和 curriedAdd() 。后者本质上是在任何情况下第一个参数为 5的 add() 版本。尽管从技术上来说 curriedAdd() 并非柯里化的函数，但它很好地展示了其概念
+
+**柯里化函数通常由以下步骤动态创建：调用另一个函数并为它传入要柯里化的函数和必要参数**。下面是创建柯里化函数的通用方式。
+
+	function curry(fn){
+	    var args=Array.prototype.slice.call(arguments,1);
+	    return function (){
+	        var innerArgs=Array.prototype.slice.call(arguments);
+	        var finnalArgs=args.concat(innerArgs);
+	        console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
+	        return fn.apply(null,finnalArgs);
+	    }
+	}
+	
+	function add(arg1,arg2){
+	    return arg1+arg2;
+	}
+	
+	var curriedAdd = curry(add, 5);
+	console.log(curriedAdd(3)); //当调用 curriedAdd() 并传入3时，3会成为add()的第二个参数，同时第一个参数依然是5，最后结果便是和8。
+
+也可以第一次直接把2个参数传进去；
+
+	var curriedAdd = curry(add, 5, 12);
+	console.log(curriedAdd()); //17 	在这里，柯里化的 add() 函数两个参数都提供了，所以以后就无需再传递它们了。
+
+函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的 bind() 函数。
+
+    //这里是绑定函数的代码；
+    var handler = {
+        message: "Event handled",
+        handleClick: function(name, event){
+            console.log(this.message + ":"+ name + ":"+ event.type);
+        }
+    };
+    function bind(fn,context){
+        var args=Array.prototype.slice.call(arguments,2);
+        return function (){
+            var innerArgs=Array.prototype.slice.call(arguments);
+            var finnalArgs=args.concat(innerArgs);
+            console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
+            return fn.apply(context,finnalArgs);
+        }
+    }
+
+    var oBtn=document.getElementById("btn");
+    EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
+
+JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用 bind() 还是 curry()要根据是否需要 object 对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。
diff --git a/index.js b/index.js
@@ -0,0 +1,22 @@
+/*
+//function curry(fn){
+function bind(fn,context){
+    //var args=Array.prototype.slice.call(arguments,1);
+    var args=Array.prototype.slice.call(arguments,2);
+    return function (){
+        var innerArgs=Array.prototype.slice.call(arguments);
+        var finnalArgs=args.concat(innerArgs);
+        console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
+        //return fn.apply(null,finnalArgs);
+        return fn.apply(context,finnalArgs);
+    }
+}
+
+var handler = {
+    message: "Event handled",
+    handleClick: function(name, event){
+        alert(this.message + ":"+ name + ":"+ event.type);
+    }
+};
+var btn = document.getElementById("my-btn");
+EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler, "my-btn"));*/
diff --git a/test-file.html b/test-file.html
@@ -6,6 +6,7 @@
 </head>
 <body>
 <a href="javascript:;" id="btn">00000000000</a>
+<script src="index.js"></script>
 <script>
     //这里是事件工具库；
     var EventUtil = {
@@ -62,16 +63,24 @@
     };
 
     //这里是绑定函数的代码；
-    var handler={
-        message:"Event handler",
-        handleClick:function(e){
-            console.log(this.message+":"+ e.type);
+    var handler = {
+        message: "Event handled",
+        handleClick: function(name, event){
+            console.log(this.message + ":"+ name + ":"+ event.type);
         }
     };
+    function bind(fn,context){
+        var args=Array.prototype.slice.call(arguments,2);
+        return function (){
+            var innerArgs=Array.prototype.slice.call(arguments);
+            var finnalArgs=args.concat(innerArgs);
+            console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
+            return fn.apply(context,finnalArgs);
+        }
+    }
+
     var oBtn=document.getElementById("btn");
-    oBtn.message="这是ID为btn的message属性";
-//    EventUtil.addHandler(oBtn,"click",bind(handler.handleClick,handler));
-    EventUtil.addHandler(oBtn,"click",handler.handleClick.bind(handler));//原生的bind方法；
+    EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));
 
 </script>
 </body>
