<!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闭包(Closure)用法。分享给大家供大家参考,具体如下: closure被翻译成“闭包”,感觉这东西被包装的太学术化。下面参考书本和网上资源简单探讨一下(理解不当之处务请留意)。 1、什么是...
本篇文章,小编一起和大家探讨JavaScript 闭包究竟是什么,有需要的朋友可以参考一下
今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的。 代码如下: <a>text</a> <a>link</a> [removed] var as = document.getElementsByTagName(‘a’); for ( var i = as.length; ...
闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一...在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,我们来详细探讨下
我将从闭包开始,这是一种在 JavaScript 中创建私有变量和函数的强大方法。然后,我this详细解释关键字。 接下来,我将深入探讨原型继承,这是 JavaScript 的一个关键特性,它允许对象从其他对象继承属性和方法。...
1.本文将深入探讨JavaScript函数的基本原理、特点,并通过多个示例展示函数的使用流程和步骤。读者将学习到如何定义函数、编写函数体、调用函数以及处理返回值。此外,文章还将对函数的参数、作用域以及闭包等高级...
加深入地探讨了jQuery 的各种特性及一些高级技术 附录A 特别讲解了JavaScript 中闭包的概念 以及如 。 , 何在jQuery 中有效地使用闭包 附录B 讲解了使用QUnit 测试JavaScript 代码的必备知识 附录C 给出了 。 ...
本书是 jQuery 经典技术教程...附录 A 特别讲解了 JavaScript 中闭包的概念,以及如 何在 jQuery 中有效地使用闭包。附录 B 讲解了使用 QUnit 测试 JavaScript 代码的必备知识。附录 C 给出了 jQuery API 的快速参考。
jQuery基础教程(中文第四版)是jQuery经典技术...附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中有效地使用闭包。附录B讲解了使用QUnit测试JavaScript代码的必备知识。附录C给出了jQuery API的快速参考。
jQuery基础教程(中文第四版)是jQuery经典技术...附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中有效地使用闭包。附录B讲解了使用QUnit测试JavaScript代码的必备知识。附录C给出了jQuery API的快速参考。
在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 、 成员属性、静态属性、原型属性与JS原型链)。今天我们来继续探讨剩余的内容吧。 我们都知道,面向对象的三大...
附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中有效地使用闭包。附录B讲解了使用QUnit测试JavaScript代码的必备知识。附录C给出了jQuery API的快速参考。 本书注重理论与实践相结合,由浅入深、循序渐...
附录A 特别讲解了JavaScript 中闭包的概念,以及如 何在jQuery 中有效地使用闭包。附录B 讲解了使用QUnit 测试JavaScript 代码的必备知识。附录C 给出了 jQuery API 的快速参考。 本书注重理论与实践相结合,...
附录A特别讲解了JavaScript中闭包的概念,以及如 何在jQuery中有效地使用闭包。附录B讲解了使用QUnit测试JavaScript代码的必备知识。附录C给出了 jQuery API的快速参考。 本书注重理论与实践相结合,由浅入深、循序...
这篇文章将从JavaScript 的语言层面进行内存的使用和优化的探讨。从大家熟悉或略有耳闻的方面,到大家大多数时候不会注意到的地方,我们一一进行剖析。 1. 语言层面的内存管理 1.1 作用域 作用域(scope)是JavaScript...
附录A特别讲解了JavaScript中闭包的概念,以及如何在jQuery中有效地使用闭包。附录B讲解了使用QUnit测试JavaScript代码的必备知识。附录C给出了jQuery API的快速参考。 《jQuery基础教程(第4版)》注重理论与实践...