JavaScript函数绑定Demo以及函数Currying柯里化

来源：互联网发布：linux关闭oracle服务编辑：程序博客网时间：2024/05/29 10:41

例1：

<!DOCTYPE html><html><head>    <title>Function Binding Example</title>    <script type="text/javascript" src="EventUtil.js"></script></head><body>    <input type="button" id="my-btn" value="Click Me" />    <script type="text/javascript">        function bind(fn, context){            return function(){                return fn.apply(context, arguments);            };        }            var handler = {            message: "Event handled",                    handleClick: function(event){                alert(this.message + ":" + event.type);            }        };                var btn = document.getElementById("my-btn");        EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler));    </script></body></html>

例2：

<!DOCTYPE html><html><head>    <title>Function Binding Example</title>    <script type="text/javascript" src="EventUtil.js"></script></head><body>    <p>This only works in browsers that natively support <code>Function.prototype.bind()</code>.</p>    <input type="button" id="my-btn" value="Click Me" />    <script type="text/javascript">        var handler = {            message: "Event handled",                    handleClick: function(event){                alert(this.message + ":" + event.type);            }        };                var btn = document.getElementById("my-btn");        EventUtil.addHandler(btn, "click", handler.handleClick.bind(handler));    </script></body></html>

例3：柯里化1：Currying 的重要意义在于可以把函数完全变成"接受一个参数、返回一个值"的固定形式。

<!DOCTYPE html><html><head>    <title>Function Currying Example</title></head><body>    <script type="text/javascript">        function curry(fn){            var args = Array.prototype.slice.call(arguments, 1);            return function(){                var innerArgs = Array.prototype.slice.call(arguments),                    finalArgs = args.concat(innerArgs);                return fn.apply(null, finalArgs);            };        }            function add(num1, num2){            return num1 + num2;        }                var curriedAdd = curry(add, 5);        alert(curriedAdd(3));   //8        var curriedAdd2 = curry(add, 5, 12);        alert(curriedAdd2());   //17    </script></body></html>

例4：柯里化2：

<!DOCTYPE html><html><head>    <title>Function Currying Example</title>    <script type="text/javascript" src="EventUtil.js"></script></head><body>    <input type="button" id="my-btn" value="Click Me" />    <script type="text/javascript">        function bind(fn, context){            var args = Array.prototype.slice.call(arguments, 2);            return function(){                var innerArgs = Array.prototype.slice.call(arguments),                    finalArgs = args.concat(innerArgs);                return fn.apply(context, finalArgs);            };        }            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"));    </script></body></html>

例5：柯里化3：

<!DOCTYPE html><html><head>    <title>Function Currying Example</title>    <script type="text/javascript" src="EventUtil.js"></script></head><body>    <p>This only works in browsers that natively support <code>Function.prototype.bind()</code>.</p>    <input type="button" id="my-btn" value="Click Me" />    <script type="text/javascript">           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", handler.handleClick.bind(handler, "my-btn"));    </script></body></html>

0 0