javascript函数中的三个技巧【三】

技巧三：

【函数绑定】

　　在javascript与DOM交互中经常需要使用函数绑定，定义一个函数然后将其绑定到特定DOM元素或集合的某个事件触发程序上，绑定函数经常和回调函数及事件处理程序一起使用，以便把函数作为变量传递的同时保留代码执行环境

<button id="btn">按钮</button>

<script>

    var handler={

        message:"Event handled.",

        handlerFun:function(){

            alert(this.message);

        }

    };

btn.onclick = handler.handlerFun;

</script>

　　上面的代码创建了一个叫做handler的对象。handler.handlerFun()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。虽然貌似警告框应该显示Event handled，然而实际上显示的是undefiend。这个问题在于没有保存handler.handleClick()的环境，所以this对象最后是指向了DOM按钮而非handler

　　可以使用闭包来修正这个问题

<button id="btn">按钮</button>

<script>

var handler={

    message:"Event handled.",

    handlerFun:function(){

        alert(this.message);

    }

};

btn.onclick = function(){

    handler.handlerFun();

}

</script>

　　　当然这是特定于此场景的解决方案，创建多个闭包可能会令代码难以理解和调试。更好的办法是使用函数绑定

　　一个简单的绑定函数bind()接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去

function bind(fn,context){

    return function(){

        return fn.apply(context,arguments);

    }

}

　　这个函数似乎简单，但其功能是非常强大的。在bind()中创建了一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context对象和参数。当调用返回的函数时，它会在给定环境中执行被传入的函数并给出所有参数

<button id="btn">按钮</button>

<script>

function bind(fn,context){

    return function(){

        return fn.apply(context,arguments);

    }

}

var handler={

    message:"Event handled.",

    handlerFun:function(){

        alert(this.message);

    }

};

btn.onclick = bind(handler.handlerFun,handler);

</script>

　　　ECMAScript5为所有函数定义了一个原生的bind()方法，进一步简化了操作

　　只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout()和setInterval()。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用

巴特西

javascript函数中的三个技巧【三】

最新文章

热门文章