js高级技巧之函数绑定

2019独角兽企业重金招聘Python工程师标准>>>

定义：

• 函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数，通常的应用场景在回调函数与事件处理程序一起使用，说的通俗点就是bind函数指定改变this的指向，废话不多说，见例子：

  var handler = {
      message: 'event handled',
      handlerClick: function (e) {
          console.log(this.message);
      }
  };
  var btn = document.getElementById('myBtn');
  btn.onclick = handler.handlerClick;
  

  • 当点击按钮的时候打印的是undefined，至于为什么，这就不用说了,下面见改造，用一个函数包裹起来：

     btn.onclick = function (e) {
        handler.handlerClick(e);
     };
    // 或者采用bind方法：
    btn.onclick = handler.handlerClick.bind(handler);
    

  • bind函数的大致封装如下，接收一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动的传递过去：

    function bind (fn ,context) {
        // 创建一个闭包
        return function () {
            // arguments是内部函数的，而不是bind函数的，
            // 在这个例子中，arguments是事件处理函数中参数，例如event对象
            return fn.apply(context, arguments)
        }
    }
    btn.onclick = bind(handler.handlerClick, handler);
    

  • 更加完整的封装见火狐MDN

转载于:https://my.oschina.net/u/3407699/blog/3020289