js高階技巧之函式繫結
阿新 • • 發佈：2019-03-11
定義：
- 函式繫結要建立一個函式，可以在特定的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
- 當點選按鈕的時候列印的是undefined，至於為什麼，這就不用說了,下面見改造，用一個函式包裹起來：