<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script type="text/javascript">
/****
* 首先说明：本例子旨在说明闭包的概念
* 如果只是为了获取点击哪一行li，方法很多，比如给其对象加索引等等
* lis[i] = i;下面就可以使用啦
*
* 闭包的标准概念（泛一点的概念是函数处处是闭包）：
* 将一个函数嵌套在另一个函数内部.被嵌套的函数 (内部函数)是只属于嵌套它的函数(外部函数)的私有函数.
这样就形成了一个闭包.
下面的英文是MDN上面摘抄的
B forms a closure including A, i.e. B can access A's arguments and variables.
C forms a closure including B.
Because B's closure includes A, C's closure includes A,
C can access both B and A's arguments and variables.
In other words, C chains the scopes of B and A in that order.
**/
window.onload = function () {
var lis = document.getElementsByTagName("LI");
for (var i = 0, j = lis.length; i < j; i++) {
/*
其实一和二的写法没有什么区别，闭包的编码模式一般来说是这样的，
函数A内部定义啦一个函数B，函数B返回引用给其调用者A，并且赋值给其他作用域中的变量C
当C执行的时候，调用的是A返回的B的引用。这个时候即时A不存在啦，B依然可以获取到A定义的局部变量。
下面的2个变体当中无论是给自执行函数传递参数，函数在自执行函数里面定义一个变量获取外部的变量，
都是自执行函数所定义的局部变量，这里自执行函数就相当于A，返回的函数就相当于B，
lis[i].onclick就相当于C
*/
//方法一
// lis[i].onclick = function (arg) {
// return function () {
// alert(arg);
// };
// }(i);
//方法二
// lis[i].onclick = (function () {
// var row = i;
// /*
// var B = function(){
// alert(row);
// };
// return B;
// */
// return function () {
// alert(row);
// };
// })();
//方法3---这里涉及到的是Function的作用，直接创建的一个闭包。
/*
* Function 构造器创建一个新的Function 对象.
* 在JavaScript中每个函数(function)实际是一个Function对象.
* Function---函数构造器（A）的内部包含一个匿名的函数体（B） lis[i].conclick(C)
* */
// lis[i].onclick = Function('alert(' + i + ')');
//方法4---跟方法3差不多，方法3的构造器里面最后一个就是函数体返回给啦onclick
// 二方法四，只不过是执行构造函数里面的函数体，然后返回一个函数给onclick。
// 只要记住闭包的标准公司保管你不会错
lis[i].onclick = (Function("\nreturn(function() {\n\talert("+i+");\n});"))();
}
//from mdn--来自火狐开发者中心
// 下例演示了一个嵌套函数:就代指我们所说的标准定义的闭包模式
//addSquares---A square-----B a,b,c---C
function addSquares(a, b) {
function square(x) {
return x * x;
}
return square(a) + square(b);
}
a = addSquares(2, 3); // returns 13
b = addSquares(3, 4); // returns 25
c = addSquares(4, 5); // returns 41
/*由于内部函数形成了一个闭包, 你可以把这个内部函数当做返回值返回,
该函数引用到了外部函数和内部函数的两个参数 */
function outside(x) {
function inside(y) {
return x + y;
}
return inside;
}
fn_inside = outside(3);
result = fn_inside(5); // returns 8
result1 = outside(3)(5); // returns 8
/***
* 闭包内参数冲突，靠近优先原则（作用域链）
* @returns {Function}
*/
function outside() {
var x = 10;
function inside(x) {
return x;
}
return inside;
}
result = outside()(20); // returns 20 instead of 10
//再来一个闭包的例子，数字累加
/****
* 函数A（count）里面包含函数B（add）,函数B返回引用给函数A，并且赋值给其他作用域作的局部变量C（myCount）
* @returns {Function}
*/
var count = function(){
var i=0;
var add = function(){
return i++;
}
return add;
};
var myCount = count();
myCount();//0
myCount();//1
}
</script>
<style type="text/css">
li {
height: 30px;
background: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
分享到：
相关推荐
### JavaScript闭包技术详解 #### 一、闭包的基本概念 **闭包**是JavaScript中一个重要的概念，它涉及到函数的执行环境、作用域链等关键要素。简单来说，闭包是一个函数及其相关的引用环境的组合。具体而言，当一...
理解函数的原型链和闭包对于深入掌握JavaScript至关重要。 首先，让我们看看函数的定义方式。在JavaScript中，我们可以使用`function`关键字直接定义函数，如`function fn(a, b) {}`。此外，函数也可以通过赋值语句...
本教程将深入讲解如何使用XMLHTTPRequest来实现自定义的Ajax请求，并探讨JavaScript的闭包模式。 首先，让我们理解XMLHTTPRequest对象的工作原理。它主要有五个状态（0-4），分别代表不同的通信阶段。状态0表示请求...
本文将基于阮一峰的文章《学习JavaScript闭包》进行深入探讨，旨在帮助读者理解闭包的基本概念及其应用场景。 #### 二、变量的作用域与闭包的关系 在深入了解闭包之前，我们需要先了解JavaScript中的变量作用域。...
本文将深入探讨JavaScript闭包的概念、工作原理及其常见用途。 首先，我们需要了解JavaScript的作用域。在JavaScript中，每个函数都有自己的作用域，即变量和函数的可见范围。全局作用域在整个程序中都是可访问的，...
描述：详细描述JavaScript闭包，适合更进一步了解闭包。 标签：javascript 闭包 从给定的文件信息来看，主要围绕JavaScript中的闭包概念进行深入探讨。闭包是计算机科学中一个重要的概念，特别是在函数式编程语言...
JavaScript中的闭包、匿名函数和作用域链是编程中至关重要的概念，它们是理解JavaScript运行机制的关键。在本文中，我们将深入探讨这三个概念，并通过实际示例来展示它们的运用。 首先，我们来讨论“闭包”。闭包是...
根据提供的文件信息，本文将围绕“JavaScript闭包”这一核心概念进行深入解析，并结合描述中的资源分享链接，进一步探讨闭包在JavaScript编程中的应用、优势及其潜在陷阱。 ### JavaScript闭包概述 #### 1. 闭包...
本文将基于提供的文件内容，深入探讨JavaScript闭包的基本原理及其应用。 #### 闭包的概念 闭包是指能够读取其他函数内部变量的函数。在JavaScript中，由于其动态作用域的特性，一个函数可以访问到定义它的外部...
在讨论JavaScript编程语言时，匿名函数和闭包是两个重要的概念，它们在函数式编程和模块化代码设计中扮演着核心角色。匿名函数是没有具体名称的函数，它们可以是独立的，也可以是表达式的一部分，通常用于定义临时...
标题中提到的关键概念包括JavaScript闭包、传参以及事件循环绑定。这三个概念在JavaScript编程中非常关键，它们的使用方法和特性对于构建Web应用的交互行为有着直接的影响。 在描述中提到循环绑定事件的问题，通常...
本文实例讲述了javascript闭包(Closure)用法。分享给大家供大家参考，具体如下： closure被翻译成“闭包”，感觉这东西被包装的太学术化。下面参考书本和网上资源简单探讨一下（理解不当之处务请留意）。 1、什么是...
JavaScript闭包是该语言一个非常重要的概念，它是理解高级JavaScript特性的基础。闭包允许一个函数访问并操作函数外部的变量，这样即使外部函数已经执行完毕，内部函数仍然可以访问外部函数的作用域。下面，我们将...
JavaScript闭包是编程语言中一个重要的概念，尤其对于JavaScript开发者来说，理解闭包至关重要。闭包的本质是一个函数，这个函数能够访问并操作其外部作用域的变量，即使在其外部作用域已经不再存在的情况下也能保持...
JavaScript闭包是JavaScript编程中一个至关重要的概念，它涉及到变量作用域、内存管理和函数特性等多个方面。闭包本质上是函数内部能够访问到其外部作用域变量的能力，即使在其外部作用域已经不再存在的情况下。下面...
JavaScript 闭包是一种高级编程技巧，它涉及到函数和作用域的概念。闭包的本质是一个函数能够访问并操作其外部函数的变量，即使在其外部函数已经执行完毕后。这主要是因为闭包保留了对外部作用域的引用，使得这些...
在深入探讨闭包之前，我们首先需要理解JavaScript中变量的作用域。在JavaScript中，变量的作用域主要分为全局变量和局部变量。全局变量在任何地方都是可见的，而局部变量只在声明它的函数内可见。JavaScript函数的...
JavaScript中的闭包是一种强大的特性，它允许内部函数访问并操作其外部函数的变量，即使外部函数已经执行完毕。闭包的出现与JavaScript的函数作用域密切相关，因为在这门语言中，只有函数作用域，没有块级作用域。这...