• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > 分享一道关于闭包、bind和this的面试题

分享一道关于闭包、bind和this的面试题

作者:xishiyi7 字体:[增加 减小] 来源:互联网 时间:2017-05-11

xishiyi7通过本文主要向大家介绍了闭包,js闭包,什么是闭包,闭包函数,javascript闭包等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index

<ul id="text">
 <li>这是第一个li</li>
 <li>这是第二个li</li>
 <li>这是第三个li</li>
</ul>
</div>

解答一:bind,将当前匿名函数指向this,将i当参数传入

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();
</div>

解答二:闭包

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();
</div>

解答三:最笨的方法,匹配

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();
</div>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 深入理解Javascript中的作用域链和闭包
  • JS闭包可被利用的常见场景小结
  • 利用js的闭包原理做对象封装及调用方法
  • javascript闭包功能与用法实例分析
  • 10道典型的JavaScript面试题
  • 图解Javascript——作用域、作用域链、闭包
  • 轻松理解JavaScript闭包
  • 轻松学习Javascript闭包
  • 详解闭包解决jQuery中AJAX的外部变量问题
  • 分享一道关于闭包、bind和this的面试题

相关文章

  • 2017-05-11jquery将标签元素的高设为屏幕的百分比
  • 2017-05-11微信小程序 页面跳转如何实现传值
  • 2017-05-11Node.js获取前端ajax提交的request信息
  • 2017-05-11jquery实现超简单的瀑布流布局【推荐】
  • 2017-09-16js对用户输入非法字符进行编解码预防xss
  • 2017-05-11微信小程序 摇一摇抽奖简单实例实现代码
  • 2017-05-11vue使用watch 观察路由变化,重新获取内容
  • 2017-05-11JS实现css hover操作的方法示例
  • 2017-05-11ES6中module模块化开发实例浅析
  • 2017-05-11完美实现js选项卡切换效果(一)

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Bootstrap缩略图的创建方法
    • Vue.js实现模拟微信朋友圈开发demo
    • 关于jQuery中fade(),show()起始位置的一点小发现
    • 正则 js分转元带千分符号详解
    • JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
    • Bootstrap模态窗口源码解析
    • Vue + Webpack + Vue-loader学习教程之相关配置篇
    • 基于JavaScript实现活动倒计时效果
    • 微信小程序 详解Page中data数据操作和函数调用
    • 使用 NodeJS+Express 开发服务端的简单介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有