高级函数之函数绑定

Posted 2020-10-20 baoyadong

     

     函数绑定技巧是一个非常流行的高级技巧。

     函数绑定要创建一个函数，可以在特定的this环境中以制定参数调用另一个函数。该技巧常常和回调函数与实践处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。例1如下：

   

    var handler = {
           message: \'Event handled\',

           handleClick: function(e){
               alert(this.message);
           }
       }
    var btn = document.getElementById(\'button\');
    btn.addEventListener(\'click\', handler.handlerClick);

当点击按钮的时候，就调用该函数，显示一个警告框，但是实际显示的内容是undefined而不是Event Handled，这个问题在于没有保存handler.handleClick（）的环境，所以this对象是指向了DOM按钮而非handler这个对象。如下使用闭包来修正这个问题。

     var handler = {
           message: \'Event handled\',

           handleClick: function(e){
               alert(this.message);
           }
       }
    var btn = document.getElementById(\'button\');
    btn.addEventListener(\'click\', function(e){
        handler.handleClick(e);
    });

 

    var handler = {
           message: \'Event handled\',

           handleClick: function(e){
               alert(this.message);
           }
       }
    var btn = document.getElementById(\'button\');
    btn.addEventListener(\'click\', handler.handleClick.bind(handler));;

原生的bind()方法和如下的自定义的bind()方法类似，需要传入做为this值的对象，支持原生bind())方法有IE9+,FireFox 4+和Chrome浏览器。

 

    var handler = {
           message: \'Event handled\',

           handleClick: function(e){
               alert(this.message);
           }
       }
    var btn = document.getElementById(\'button\');
    
    btn.addEventListener(\'click\', bind(handler.handleClick, handler));
    function bind(fn, context){
        return function(){
            return fn.apply(context, arguments);
        }
    }