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