js闭包的使用


  1 <!doctype html>
2 <html>
3 <head>
4 <title>闭包</title>
5 <meta charset=uft-8>
6 </head>
7 <body>
8 <script>
9 function call(a, b, c){
10
11 return function(){
12 alert(b + c);
13 };
14 }
15
16 // var fun = call(1,2,3);
17
18 //alert(call);
19 //call = null;
20 //alert(call);
21
22 // alert(fun()());
23 main = setTimeout(fun(1,2,3), 1000);
24 // alert(main)
25
26 //闭包的好处1: 保存变量,变量长期保存在内存中
27 //闭包的好处2: 减少全部变量的污染
28 //闭包的好处3: 私有成员的存在
29
30 //闭包的用法1: 代码模块化
31 var aaa = (function(){
32
33 var a = 1;
34
35 function bbb(){
36 a++;
37 alert(a);
38 }
39
40 function ccc(){
41 a++;
42 alert(a);
43 }
44
45 return {
46 b: bbb,
47 c: ccc
48 }
49
50 })();
51
52
53 //闭包的用法2: 在循环中直接找到对应元素的索引
54 window.onload = function(){
55 aLi = document.getElementsByTagName(‘li‘);
56
57 for(var i=0; i< aLi.length; i++){
58
59 //解决方案1
60 //(function(i){
61 // aLi[i].onclick = function(){
62 // alert(i);
63 // }
64 //})(i);
65
66 //解决方案2
67 aLi[i].onclick = (function(i){
68 return function (){
69 alert(i);
70 }
71 })(i);
72 }
73 }
74
75 //使用闭包需要注意的地方: IE中容易发生内存泄露的问题,在IE中外部属性和内部对象交叉引用时容易发生内存泄露
76 window.onload = function(){
77 var oDiv = document.getElementById(‘oDiv‘);
78 oDiv.onclick = function(){
79 alert(oDiv.id);
80 }
81 }
82
83 //解决方案1
84 window.onunload = function(){
85 oDiv.onclick = null;
86 }
87
88
89 //解决方案2
90 //window.onload = function(){
91 // var oDiv = document.getElementById("oDiv");
92
93 //在外部设置一个变量
94 // var id = oDiv.id;
95
96 // oDiv.onclick = function(){
97 //alert(id);
98 // }
99
100 //还要将oDiv 设置成 null
101 // oDiv = null;
102
103 // }
104 </script>
105
106 <ul>
107 <li>111111111111111111111</li>
108 <li>111111111111111111111</li>
109 <li>111111111111111111111</li>
110 </ul>
111 </body>
112 </html>

js闭包的使用

时间: 2024-12-06 18:37:54

js闭包的使用的相关文章

js闭包浅了解

js闭包浅理解 要理解闭包,得先知道js的变量作用域,在js中,有两种变量作用域: 全局作用域 局部作用域 一.在函数内可以访问全局变量 比如,下面的例子: <!--lang:js--> <script> var n = 100; function f1(){ console.log(n); } f1()//返回100 </script> 上面的例子很简单,下面是另一种情况. 二.在函数外无法读取函数内的局部变量 还是一个小例子: <!--lang:js-->

js闭包的作用

js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看看闭包的用途.事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格:更优雅,更简洁的表达出代码:在某些方面提升代码的执行效率. 1 匿名自执行函数 我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处,比如:别的函数可能误用

浅谈JS闭包中的循环绑定处理程序

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的,谢谢! 先贴上错误的例子让大家

关于JS闭包,作者不详(转)

说明:本文由两篇文章结合而成,系从他人笔记中转过来的, 具体作者不详.因为觉得不错,遂共享之.如有侵权,立删致歉. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 fun

js闭包(closure),个人理解

一.闭包概念理解 各种专业文献上对js"闭包"(closure)定义非常抽象,贼难看懂.我的理解是,闭包就是能够读取某函数内部变量的函数.由于在Javascript语言中只有在函数内部的函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数".所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 二.用途 闭包可以用在很多地方.但它最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中. 三.使

理解js闭包原理

各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂.我的理解是,闭包就是能够读取其他函数内部变量的函数. 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数". 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中. 怎么来理解这句话呢?请看下面的

js 闭包让函数只执行一次

js 闭包让函数只执行一次 <script>function once(f) {    var run;    return function() {        if (!run) {            run = true;            f.apply(this, arguments);        }    }}var g = once(function(x) {    alert(x)});g(1);g(2);g(3); </script> js 闭包让函

js闭包之我见

很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: 1 function test(){ 2 for(var i=0;i<5;i++){ 3 window.onclick=function(){ 4 alert(i); 5 } 6 } 7 } 8 test() 原意是点击第一下弹出i的值0,点击第二下弹出i的值1,一直到第五次点击弹出4.想象是美好的,现实却不按常规出牌,无论点击多少次,alert出来的值都是5.后来接触了js闭包,才知道原来是它搞的鬼.看了不少相关书籍和博客后,

大部分人都会做错的经典JS闭包面试题

大部分人都会做错的经典JS闭包面试题 目录 由工作中演变而来的面试题 JS中有几种函数 创建函数的几种方式 三个fun函数的关系是什么? 函数作用域链的问题 到底在调用哪个函数? 后话 由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) { console.log(o) return { fun:function(m){ return fun(m,

js闭包演示

有个网友问了个问题,如下的html,为什么每次输出都是5 <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <style type="text/css"> </style> <script type=