欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

分享一道關(guān)于閉包、bind和this的面試題

 更新時間：2017年02月20日 10:26:52   作者：xishiyi7  
這篇文章主要給大家介紹了一道關(guān)于閉包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();

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

  • uni-app學習之nvue使用教程

    uni-app學習之nvue使用教程

    uni-app可以說是目前跨端數(shù)最多的框架之一了,這篇文章主要給大家介紹了關(guān)于uni-app學習之nvue使用的相關(guān)資料,文中介紹的非常詳細,需要的朋友可以參考下
    2022-11-11
  • js實現(xiàn)HTML中Select二級聯(lián)動的實例

    js實現(xiàn)HTML中Select二級聯(lián)動的實例

    下面小編就為大家分享一篇js實現(xiàn)HTML中Select二級聯(lián)動的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • JavaScript箭頭函數(shù)的五種使用方法及三點注意事項

    JavaScript箭頭函數(shù)的五種使用方法及三點注意事項

    這篇文章主要介紹了JavaScript箭頭函數(shù)的五種使用方法及三點注意事項,箭頭函數(shù)是ES6新增的定義函數(shù)的方式,文章圍繞主題展開詳細的內(nèi)容介紹，需要的朋友可以參考一下
    2022-08-08
  • Javascript獲取數(shù)組中的最大值和最小值的方法匯總

    Javascript獲取數(shù)組中的最大值和最小值的方法匯總

    比較數(shù)組中數(shù)值的大小是比較常見的操作，下面同本文給大家分享四種放哪廣發(fā)獲取數(shù)組中最大值和最小值，對此感興趣的朋友一起學習吧
    2016-01-01
  • 純js的右下角彈窗實例

    純js的右下角彈窗實例

    下面小編就為大家?guī)硪黄僯s的右下角彈窗實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03
  • JavaScript設計模式之責任鏈模式實例分析

    JavaScript設計模式之責任鏈模式實例分析

    這篇文章主要介紹了JavaScript設計模式之責任鏈模式,結(jié)合實例形式分析了責任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下
    2019-01-01
  • 定單管理上 JS表格排序

    定單管理上 JS表格排序

    定單管理上 JS表格排序...
    2006-10-10
  • setInterval計時器不準的問題解決方法

    setInterval計時器不準的問題解決方法

    在js中如果打算使用setInterval進行倒數(shù),計時等功能，往往是不準確的，針對這個問題，本文有個不錯的解決方案
    2014-05-05
  • TypeScript中使用類型斷言的幾種方式分享

    TypeScript中使用類型斷言的幾種方式分享

    在TypeScript中,類型斷言用于告訴編譯器某個變量的類型,這在我們確定變量的類型比編譯器更準確時非常有用,本文給大家分享了幾種TypeScript中使用類型斷言方式,需要的朋友可以參考下
    2023-09-09
  • 基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片

    基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片

    這篇文章主要介紹了基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-05-05

最新評論