當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript函数绑定

發布時間：2023/11/29 javascript 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript函数绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一個簡單的函數綁定

在JavaScript與DOM交互中經常需要使用函數綁定，定義一個函數然后將其綁定到特定DOM元素或集合的某個事件觸發程序上，綁定函數經常和回調函數及事件處理程序一起使用，以便把函數作為變量傳遞的同時保留代碼執行環境。

<body><input id="btnTest" type="button" value="Button"/><script type="text/javascript"> var handler={message:"Event handled.",handlerFun:function(){alert(this.message);}};document.getElementById('btnTest').οnclick=handler.handlerFun;</script></body>

上面的例子創建了一個handler對象，handler.handlerFun()方法被分配為DOM按鈕的click事件處理程序。設計意圖是這樣的：當點擊按鈕的時候觸發該方法，彈出對話框顯示handler定義的message，然而點擊后對話框內容卻是undefined。熟悉閉包的同學可以輕松看出來這個問題在于沒有保存handler.handlerFun()方法的執行環境，this對象最后指向了DOM按鈕而非handler。可以使用閉包解決此問題，修改函數綁定語句

document.getElementById('btnTest').οnclick=function(){handler.handlerFun();}

這樣就可以得到預期的結果，這個解決方案在onclick程序內部使用一個閉包直接調用handler.handlerFun()方法，當然這是特定于此場景的解決方案，創建多個閉包可能會令代碼難以理解和調試。

?

自定義bind函數

function bind(fn,context){return function(){return fn.apply(context,arguments);};}document.getElementById('btnTest').οnclick=bind(handler.handlerFun,handler);

通過自定義的bind函數可以將函數綁定到指定環境，bind()函數接收兩個參數：一個綁定函數，一個執行環境，并返回一個在執行環境中調用綁定函數的函數?？雌饋砗芎唵?#xff0c;但是其功能很強大，在bing()中創建了一個閉包，閉包使用apply()調用傳入的函數，并給apply()傳入執行環境和參數，這里的arguments是內部匿名函數的，而非bind()的。當調用返回的函數時，它會在給定的函數中執行被傳入的函數，并給出所有參數。上面例子的調用handler.handlerFun依舊可以得到參數event，因為所有參數在都通過綁定的函數傳遞給它了。

小結

一旦要將某個函數以函數指針的形式傳遞，同時該函數必須在特定的環境中執行，自定義的bind()函數就可以使用，他們主要用于事件處理程序及setTimeout和setInterval,然而這種綁定方式和普通函數相比需要更多的內存開銷，所以盡量只在必要的時候使用。

總結

以上是生活随笔為你收集整理的JavaScript函数绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。