JavaScript的闭包详解

(1)定义:  函数内部返回一个函数,返回出来的这个函数叫做被我们称之为闭包(个人理解的最简单的表现形式,)
(2)为什么要使用闭包呢?

    局部变量在函数执行完之后就会被GC回收,有时候我们想在外部访问内部的变量,这个时候就用到了闭包

(3)闭包有两个作用:

    a.访问函数内部的变量(函数作为返回值)    b.保存作用域(函数作为参数传递)
 1   //1.访问函数内部的变量(函数作为返回值)
 2     function test(){
 3         var age = 18;
 4         return function(){
 5             console.log(age);
 6         }
 7     }
 8
 9     var myTest = test();
10     console.log(myTest);//为匿名函数,function(){console.log(age)}
11     myTest();//18
12
13
14
15     //另一个例子
16     function fn() {
17         var max = 10;
18         return function bar(x) {
19             if (x > max) {
20                 console.log(x);
21             }
22         }
23     }
24     var f1 = fn();
25     console.log(f1);//function bar(x){if(x>max){console.log(x);}}
26     f1(15);//结果为15
27
28
29     //保存作用域(函数作为参数传递)
30
31     //保存作用域
32     function test(){
33         var a = 1;//局部变量
34         hehe = function(){//全局变量
35             a++;
36         };
37         return function(){
38             console.log(a);
39         }
40     }
41
42     var haha = test();//此时haha为test()执行完之后的返回值,匿名函数function(){consolloe.log(a)}
43     haha();//打印1
44     hehe();//hehe函数为全局变量,可以在外边执行,此处a++
45     haha();//打印2
46     hehe();//同上
47
48     //注意:haha为全局变量,不会被GC回收,所以test函数的返回值,一直存在,test的作用域一直存在,不会被GC回收
49
50     //注意:自由变量跨域取值时,要去创建这个函数的作用域取值,而不是“父作用域”;
51     //
52     var max = 10;
53     var fn = function(x){
54         if(x>max){
55             console.log(max);//10
56             console.log(x);//15
57         }
58     };
59
60     (function(f){
61         var max = 100;
62         f(15);
63     })(fn);

(4)闭包的使用    假设页面上有5个div节点,我们通过循环来给每个div绑定onclick事件,按照索引顺序,点击第一个div时弹出0,点击第2个div时弹出1,以此类推。
1  <body>
2     <div>1</div>
3     <div>2</div>
4     <div>3</div>
5     <div>4</div>
6     <div>5</div>
7 </body>
 1 //闭包的使用
 2
 3     var nodes = document.getElementsByTagName(‘div‘);
 4     for(var i=0;i<nodes.length;i++){
 5         nodes[i].onclick = function(){
 6             console.log(i);
 7         }
 8     }
 9     //思考一下,存在什么问题??
10     // 点击每一个打印的都是5是不是···
11
12
13     var nodes = document.getElementsByTagName(‘div‘);
14     for(var i=0;i<nodes.length;i++){
15         (function(i){ //块级作用域或私有作用域
16             nodes[i].onclick = function(){
17                 console.log(i);
18             }
19         })(i)
20     }
21     //上述方法优点:把每次循环的i值都封闭起来

(5)使用闭包的注意点

    由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,    所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。
 
时间: 2024-12-15 12:12:58

JavaScript的闭包详解的相关文章

代码示例:一些简单技巧优化JavaScript编译器工作详解,让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +

Javascript 严格模式详解

Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度

我看朴灵评注阮一峰的《JavaScript 运行机制详解:再谈Event Loop》

阮一峰和朴灵对我来说都是大牛,他们俩的书我都买过,阮老师的译作<软件随想录>和朴灵的<深入浅出node.js>.这个事情已经过了4个月了,所以我拿来讲应该也没啥问题. 这件事情是这样的,阮一峰在自己的博客写了篇文章<JavaScript 运行机制详解:再谈Event Loop>,然后朴灵看见了,发现了很多问题,然后在印象笔记又写了篇文章<[朴灵评注]JavaScript 运行机制详解:再谈Event Loop>,由于印象笔记现在已经不能访问了(尼玛也太烂了)

JavaScript 运行机制详解

JavaScript 运行机制详解——转载: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另

javascript工具--控制台详解(转自 阮一峰博客)

javascript工具--控制台详解(转自 阮一峰博客) 大神这篇博客是写在2011年,主要介绍 "Firefox" 浏览器插件 "Firebug" 的操作,如今主流浏览器对控制台都已经提供了很好的支持.我自己用的最多是谷歌的 "chrome" 浏览器,下面也用 "chrome" 浏览器来调试. 一.显示信息的命令 console.log();  //控制台输入 网页中不会输出 console.info();  //一般信息

Swift 中的Closures(闭包)详解

Swift 中的Closures(闭包)详解 在Swift没有发布之前,所有人使用OC语言编写Cocoa上的程序,而其中经常被人们讨论的其中之一 -- Block 一直备受大家的喜爱.在Swift中,同样有这样的一个角色,用于当开发者需要异步执行的之后使用的一种语法 - Closure.中文翻译为闭包. 闭包出了可以进行异步执行之外,它的完整使用还依赖闭包本身的变量.常量的捕获.闭包捕获并存储对它们定义的上下文中的任何常量和变量的引用,这也就意味着,你可以在任何时候异步执行闭包的时候获取之前的所

JavaScript对象类型详解

JavaScript对象类型详解 JavaScrtip有六种数据类型,一种复杂的数据类型(引用类型),即Object对象类型,还有五种简单的数据类型(原始类型):Number.String.Boolean.Undefined和Null.其中,最核心的类型就是对象类型了.同时要注意,简单类型都是不可变的,而对象类型是可变的. 什么是对象 一个对象是一组简单数据类型(有时是引用数据类型)的无序列表,被存储为一系列的名-值对(name-value pairs).这个列表中的每一项被称为 属性(如果是函

javascript 操作cookies详解

javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

[转]JavaScript异步机制详解

原文: https://www.jianshu.com/p/4ea4ee713ead --------------------------------------------------------------------------- 学习JavaScript的时候了解到JavaScript是单线程的,刚开始很疑惑,单线程怎么处理网络请求.文件读写等耗时操作呢?效率岂不是会很低?随着对这方面内容的了解和深入,知道了其中的奥秘.本篇文章就主要讲解一下JavaScript怎么处理异步问题. 一.同