首页 > 其他 > 详细

高级函数之函数绑定

时间:2018-01-14 00:17:44      阅读:254      评论:0      收藏:0      [点我收藏+]

     

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

     函数绑定要创建一个函数,可以在特定的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);
        }
    }

 

高级函数之函数绑定

原文:https://www.cnblogs.com/xuzhudong/p/8280831.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!