分享一道關于閉包、bind和this的面試題
更新時間：2017年02月20日 10:26:52 作者：xishiyi7
這篇文章主要給大家介紹了一道關于閉包bind、this的面試題，文中給出了詳細的示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。
要解決的問題是針對下面這個ul，為每一個li添加一個點擊事件，彈出對應的index
<ul id="text"> <li>這是第一個li</li> <li>這是第二個li</li> <li>這是第三個li</li> </ul>
解答一：bind，將當前匿名函數(shù)指向this，將i當參數(shù)傳入
var init = function(){
var obj = document.getElementById('text');
for(var i=0;i<obj.children.length;i++){
obj.children[i].addEventListener('click',function(i){
alert(i)
}.bind(this,i))
}
}
init();
解答二：閉包
var init = function(){
var lis=document.querySelectorAll("#text li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=(function(i){
return function(){
alert(i);
};
})(i)
}
}
init();
解答三：最笨的方法，匹配
var init = function(){
var obj = document.getElementById('text');
for(var i=0;i<obj.children.length;i++){
obj.children[i].addEventListener('click',function(item){
var self = item.target;
for(var j=0;j<obj.children.length;j++){
if(self == obj.children[j]){
alert(j);
}
}
})
}
}
init();
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
這篇文章主要介紹了怎樣控制input輸入框中提示信息的顯示和隱藏 ,需要的朋友可以參考下2014-02-02
JavaScript整除運算函數(shù)ceil和floor的區(qū)別分析
這篇文章主要介紹了JavaScript整除運算函數(shù)ceil和floor的區(qū)別分析,實例分析了ceil和floor函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了Vuejs通過拖動改變元素寬度實現(xiàn)自適應,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
下面小編就為大家?guī)硪黄狫S實現(xiàn)下拉菜單列表與登錄注冊彈窗效果。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
微信小程序可以通過直接寫 data-index="1" 進行數(shù)據的綁定 ,利用 bindtap 點擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過點擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12
Webpack 本身是不能識別樣式資源的,所以我們需要借助 Loader 來幫助 Webpack 解析樣式資源,本文就來介紹一下Webpack處理樣式資源的配置詳情,感興趣的可以了解一下2023-12-12
編寫高性能的JavaScript 腳本的加載與執(zhí)行
把腳本放在body中，當瀏覽器遇見<script>標簽時， 瀏覽器不知道腳本會插入文本還是html標簽，因此瀏覽器會停止分析html頁面而去執(zhí)行腳本。2010-04-04
浮點數(shù)的精度問題不是JavaScript特有的，本文主要介紹了JavaScript浮點數(shù)及運算精度調整詳解，有需要的朋友可以了解一下。2016-10-10
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單九宮格抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JavaScript設計模式之觀察者模式,結合實例形式詳細分析了javascript觀察者模式的概念、原理、用法及相關操作注意事項,需要的朋友可以參考下2019-01-01