js高級技巧之函數綁定

定義：

• 函數綁定要建立一個函數，能夠在特定的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