javascript的自启动函数。
两段代码：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
alert(i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
}, 'false');
}
再看一面一段：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function(index){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + index);
}, 'false');
})(i);
}
HTML 代码如下：
复制代码代码如下:
<body>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "#">a</a> <a href = "http://www.jbxue.com">脚本学堂</a>
<a href = "http://www.jbxue.com">脚本学堂</a>
</body>
你可以想像下，前后两段 script代码的效果。
如果你能看出来效果的区别，那么恭喜你。至少我思考了很久，才明白里面的玄妙。
是的。你没有看错，这里的第一段代码，无论你点击哪一个链接，输出的都是 I am link # 8.
第二段代码，才是你真正想要的结果，那么为什么呢。
看下面的代码：
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
alert(i);
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + i);
//注意这里的回调函数只有的触发的时候才会启动
//一样，这里的i的值也一样在循环结束的时候也变化了
}, 'false');
//原因在于
//这里的elems[i] 虽然是引用的元素
//但是回调函数中的i 已经在循环结束后
//变成了8(如果 elems 的长度是 8 的话)
}
复制代码代码如下:
var elems = document.getElementsByTagName('a');
for (var i = 0; i < elems.length; i++) {
(function(index){
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + index);
}, 'false');
})(i);
//而这里的则不一样
//虽然循环结束后i 的值变成了8
//但是在封装在闭包内的index 确实一直被locked 住的
//一直保存在内存中。
//准确的说 应该是整个函数都lock在内存中.
}
这里可能需要一些javascript闭包的知识。
相关推荐
在文档中提到的两个例子中，主要探讨的是闭包和作用域的问题，这是理解 JavaScript 自启动函数的关键点。 首先，让我们看看第一段代码： ```javascript var elems = document.getElementsByTagName('a'); for (var...
本文将深入探讨一个JavaScript多线程函数库的使用方法，帮助开发者更好地理解和利用这一特性。 ### 一、Web Workers：JavaScript的多线程基础 Web Workers是JavaScript实现多线程的核心技术，它允许在后台线程中...
本文将深入探讨JavaScript编辑器和它们的提示功能。 一、JavaScript编辑器的重要性 1. 提高编程效率：具有智能提示的编辑器可以在输入代码时自动完成部分语句或函数，减少手动输入的工作量，节省时间。 2. 减少...
首先，我们来探讨一下JavaScript的基础知识。JavaScript是一种解释型、基于原型的动态类型语言，它的主要特点是弱类型和事件驱动。在网页上，JavaScript主要用于处理用户交互、操作DOM（文档对象模型）以及进行异步...
在本篇文章中，我们将深入探讨如何利用JavaScript创建一个功能齐全的时钟，并理解其背后的原理。 首先，我们需要了解JavaScript中的Date对象。Date对象是JavaScript内建的全局对象，用于处理日期和时间。我们可以...
在“JAVASCRIPT页面效果实例”中，我们可以深入探讨如何使用JavaScript来增强用户体验并创建引人入胜的网页效果。下面将详细介绍几个关键的JavaScript页面效果及其实现方法。 1. **页面加载动画** 当用户访问网站...
2. `emulator/`: 这里可能是JavaScript实现的X86指令集解释器，每个X86指令都被转化为JavaScript函数执行。 3. `roms/`: 可能包含了一些预装的操作系统ROM映像，比如MS-DOS，供虚拟机启动使用。 4. `web/`: 这个目录...
辅助函数通常是一些小型、独立的代码块，用于解决特定问题，如类型检测、数组操作、对象深度复制等。它们可以提高代码的可重用性，并降低代码的复杂度。 "Initialisation"章节则关注框架的初始化过程。初始化阶段是...
本文将深入探讨如何使用EditPlus这款强大的文本编辑器来高效地调试JavaScript代码，旨在帮助开发者提升工作效率，优化代码质量。 **EditPlus简介** EditPlus是一款功能丰富的文本编辑器，尤其适合程序员使用。它...
本篇文章将深入探讨JavaScript编辑器的重要性，以及如何利用它们来优化编程体验。 一、JavaScript编辑器的功能特性 1. 语法高亮：JavaScript编辑器通常具有语法高亮功能，它能够区分关键字、变量、函数等不同元素...
例如，在没有ng-app指令的情况下，开发者需要在JavaScript代码中创建相应的模块和控制器，并通过document.ready函数等待文档初始化完成后再进行手动启动。 配置注入启动则是另一种启动模式，它允许开发者通过一个...
本文将深入探讨如何使用JavaScript来实现跑马灯效果。 首先，我们需要理解跑马灯的基本原理。跑马灯效果通常是通过在一个固定区域显示一组元素（如图片），然后定期或根据用户交互改变显示的元素，形成一种循环滚动...
6. **停止与启动**：通常，还需要提供一个机制来停止和重新启动滚动效果，这可以通过`clearInterval`函数来清除定时器，而当需要再次滚动时，可以重新设置定时器。 7. **用户交互**：考虑用户体验，可以添加按钮或...
JavaScript是Web开发中不可或缺的一部分，尤其在网页动态效果和用户交互方面发挥着重要作用。"JavaScript入门特效"这个主题，主要涵盖了使用JavaScript实现的各种视觉效果，如波浪字体和滚动图片等，这些都是初学者...
在"**DWR推送功能实现实例（前段,后台函数互调）**"中，我们将深入探讨如何利用DWR来实现实时的双向通信。 **DWR的基本原理**： DWR的核心是通过动态生成JavaScript库，使JavaScript可以直接调用Java对象的方法。...
本文研究了基于JavaScript的计时器实现方法，讨论了setInterval()和setTimeout()两种计时器实现方法的使用和优缺点，并提出了一种解决计时器重复启动的问题解决方案。 计时器是动态网页和网络游戏中经常用到的技术...
3. **JavaScript逻辑**：在JavaScript中，定义一个函数来切换图片的显示状态。使用setInterval定时调用该函数，实现周期性轮换。 ```javascript let index = 0; // 当前显示图片的索引 const images = document....
2. **初始化引擎**：在程序启动时，需要初始化JavaScript引擎，创建一个执行上下文，这是JavaScript代码运行的环境。 3. **加载和执行脚本**：有了执行环境后，可以加载JavaScript代码字符串或文件，然后通过引擎...