1. 程式人生 > >高級函數之函數綁定

高級函數之函數綁定

回調函數 urn click btn bsp 參數 使用 ssa spa

函數綁定技巧是一個非常流行的高級技巧。

函數綁定要創建一個函數,可以在特定的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);
        }
    }

高級函數之函數綁定