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

最新推荐文章于 2023-07-25 14:04:14 发布

原创最新推荐文章于 2023-07-25 14:04:14 发布 · 985 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文通过多个示例介绍了JavaScript中函数绑定与柯里化的应用。包括使用自定义函数实现绑定，以及利用现代浏览器支持的原生bind方法进行绑定。此外，还展示了柯里化如何帮助函数预设参数，简化调用过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例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>